10与元素亲密接触:盒元素(the box model)

line-height属性可以设置文本的行间距,可以用像素、em或百分比等于字体大小有关的值定义行间距line-height: 1.6em;(行间距为字体大小的1.6倍)

CSS把每一个单一的元素看作是一个盒子。每个盒子由内容区及可选的补白、边框和边界组成。可以用补白在盒子的内容和边框之间创建可视的空白。补白是透明的,本身没有颜色或修饰。如果两个盒子相邻,边界就相当于它们之间的空间,边界也是透明的,本身没有颜色或修饰。边界是元素之间的空间,而补白是内容周围多出来的空间。

用CSS添加边框

.guarantee{

  border-color: black;

  border-width: 1px;

  border-style: solid;

}

padding属性可以用来设置补白大小,这个属性可以设置成多少像素或边框里面部分的百分之几。padding: 25px;在左侧添加补白padding-left: 80;

margin属性可以用设置边界大小,可以用百分比或像素定义边界。margin: 30px;只在右侧增加边界margin-right: 250px;

background-image属性可以给任何元素添加背景图像,但不能用它在页面中添加图像(此时应该用<img>)。background-img: url(XXXXX);background-position属性可以设置背景图像的位置,可以用像素、百分数或top、left、right、bottom、center这些关键字。background-position:top left;background-repeat属性可以用来控制平铺效果,可以设置为repeat、no-repeat、repeat-x、repeat-y、inherit。backgroud-repeat: repeat;

border-style属性用来控制边框的外观,一共有8种边框样式,solid、dotted、double、dashed、groove(看起来像凹进页面里)、inset(像是嵌入到页面中)、outset(像是从页面升起的一块凸处)、ridge(是页面中凸出的边界)。

border-width属性用来控制边框宽度,可以用关键字thin、medium、thick或像素值定义宽度。

border-color属性用来设置边框颜色,可以用颜色名称、rgb值或十六进制代码定义颜色。

和边界和补白一样,也可以定义任何一侧(上、下、左、右)的边框样式、宽度或颜色。border-top-color:black;

向应用一种样式到多个元素时用类。需要应用样式的只是一个元素并且页面上只有一个,就用id。严格来说,id属性是命名唯一的元素的。一个元素不能有多个id,而且同一页面中不能有一个以上的元素用同一个id。要通过一个元素的id选择它,在id前面叫一个“#”(在类中类名称之前用一个“.”)。类和id之间的唯一不同是id选择符只跟一个页面中的一个元素匹配。一个元素只能有一个id,但可以属于几个类。

样式表的顺序很重要,一个样式表会覆盖在它之前链接的样式表中的样式,即最下面的样式表优先权最高。

<link>元素有一个叫做media的属性,可以用来定义样式文件所需要的设备类型,screen、print、handheld。

<link type="text/css" rel="stylesheet" href="XXX" media="screen" />

时间: 2024-07-28 16:28:32

10与元素亲密接触:盒元素(the box model)的相关文章

CSS盒模型(Box Model)

阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀.盒模型是网页布局的基础,它制定了元素如何在页面中显示,如果足够地掌握,那使用CSS布局那将会容易得多. 1. 什么是CSS盒模型 盒模型,顾名思义,就是一个盒子.生活中的盒子,有长宽高,盒子本身也有厚度,可以用来装东西.页面上的盒模型我们可以理解为,从盒子顶部俯视所得的一个平面图,盒子里装的东西,

【Win 10 应用开发】打印UI元素

原文:[Win 10 应用开发]打印UI元素 Windows App支持将UI界面进行打印的功能,这与浏览器中的打印网页的用途相近,其好处就是“所见即所得”,直接把界面上呈现的内容打印下来,比重新创建打印图像方便得多. 要在通用App中实现打印,主要依靠以下几个类型: PrintManager:位于Windows.Graphics.Printing命名空间,主要负责显示打印对话框,设置打印源等操作.在使用时,首先调用GetForCurrentView静态方法得到一个PrintManager实例:

CSS学习笔记——盒模型,块级元素和行内元素的区别和区别

今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面其实基础真的很差,今天在写页面的时候就被浮动啊.内外边距啊这些耽误了不少时间. 反思一下,自己确实在这些基础方面的不足很多,所以今后的学习笔记主要是我在工作中遇到的一些问题和他们的解决方法.其中可能中会有JS.CSS.HTML各方面的,我会把自己每一天学到的内容都记录一下,辅助自己打好基础. 今天在

10套免费的 Photoshop UI 元素以及 PSD 素材

免费的 PSD 用户界面工具包以及可以编辑 Photoshop PSD 文件,有你需要的设计漂亮的用户界面和惊人使用体验.这些用户界面工具包可有免费下载,可随意定制的,而且这些 PSD 分层素材文件组织得很好. 您可能感兴趣的相关文章 23套新鲜出炉的网站和手机 PSD 素材 分享30套精美的Web和手机开发UI素材 推荐10大优秀的移动Web应用开发框架 20个设计精致的用户界面 PSD 源文件 45套新鲜出炉的精美 PSD 网页设计素材 App UI Kit Download Kicks U

javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方)

主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除splice(需明确位置) 9.数组遍历 10.jQuery根据元素值删除数组元素的方法 数组常见操作包含了 增.删.查.改.插入.交集.并集 1.数组整体元素修改 //map,给数组每个元素加1 输出[1,2,3] $.map([0,1,2],function(n){ return n+1; })

学习总结:CSS(一)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

.displayTal { width: 100%; font-size: 13px } .displayTal1 { width: 30%; height: 30px; font-size: 13px; color: #009933 } .displayTal2 { width: 40%; height: 30px; font-size: 13px; color: #009933 } .displayTal3 { width: 30%; height: 30px; font-size: 13p

看好你的门-客户端传数据(10)-不安全的HTML禁用元素

首先需要声明,本文纯属一个毫无远见和真才实学的小小开发人员的愚昧见解,仅供用于web系统安全方面的参考. 1. 简单说明 继续说故事,某一天产品经理策划了一个方案,要搞一个促销.一个用户最多只能用一次鸡蛋优惠券. 开发人员需要对系统进行修改和调整. 让我们脑补一下,传统行业搞互联网电商的场景: 产品经理:赶快改,赶快上,赶快搞活动 运维经理:版本升级,提交上线评估报告,风险测试报告,系统测试报告,各位负责领导签字文件--: 开发人员A:靠,老子一早从9点干到晚上9点,还要老子去写那么多报告,让我

18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素

盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 盒子高度 = height + padding上下 + border上下 margin相关技巧 1.设置元素水平居中: margin:x auto;2.margin负值让元素位移及边框合并 外边距合并 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合

与Jquery Mobile的第一次亲密接触

Jquery Mobile闻名已久,今天终于有亲密接触的机会. 通过动手写的demo,对它有了一个基本的认识: 自带的UI组件用起来简洁,方便:对旧版本的浏览器或移动设备能做到很好的优雅降级,而不影响页面性能: 基于AJAX的数据处理给人很好的用户体验:快速,高效,交互友好: 页面切换效果么么哒; data-*属性的运用也十分便捷,易用,且功能强大. Demo: <!DOCTYPE html> <html> <head> <title></title&