李南江跨平台开发课程14——盒模型

盒模型

边框属性

• 什么边框?

• 边框就是环绕在标签宽度和高度周围的线条

• 边框属性的格式

• 连写(同时设置四条边)

• border: 边框的宽度 边框的样式 边框的颜色;

• 示例代码

• 快捷键:

• bd+ border: 1px solid #000;

• 注意点:

• 连写格式中颜色属性可以省略, 省略之后默认就是黑色

• 连写格式中样式不能省略, 省略之后就看不到边框了

• 连写格式中宽度可以省略, 省略之后还是可以看到边框

• 按方向连写(分别设置四条边)

• border-top: 边框的宽度 边框的样式 边框的颜色;

• border-right: 边框的宽度 边框的样式 边框的颜色;

• border-bottom: 边框的宽度 边框的样式 边框的颜色;

• border-left: 边框的宽度 边框的样式 边框的颜色;

• 示例代码

• 快捷键:

• bt+ border-top: 1px solid #000;

• br+ border-right: 1px solid #000;

• bb+ border-bottom: 1px solid #000;

• bl+ border-left: 1px solid #000;

• 按要素连写(分别设置四条边)

• border-width: 上 右 下 左;

• border-style: 上 右 下 左;

• border-color: 上 右 下 左;

• 示例代码

• 注意点:

• 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

• 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

• 上 右 下 左 > 上 > 右下左边取值和上边一样

• 这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右

• 这三个属性的取值省略时的规律

• 非连写(方向+要素)

• 示例代码

• border-top-width: ;

• border-top-style:;

• border-top-color:;

• border-right-width:;

• border-right-style:;

• border-right-color:;

• border-bottom-width:;

• border-bottom-style: ;

• border-bottom-color:;

• border-left-width:;

• border-left-style:;

• border-left-color:;

注意点:

• 同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的

内边距属性

• 什么是内边距?

  边框和内容之间的距离就是内边距

• 格式

• 单独设置四条边

• padding-top: ;

• padding-right: ;

• padding-bottom: ;

• padding-left: ;

• 示例代码

• 同时设置四条边

• padding: 上 右 下 左;

• 示例代码

• 注意点:

• 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

• 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

• 上 右 下 左 > 上 > 右下左边取值和上边一样

• 这三个属性的取值省略时的规律

• 给标签设置内边距之后, 标签占有的宽度和高度会发生变化

• 给标签设置内边距之后, 内边距也会有背景颜色

外边距属性

• 什么是外边距?

• 标签和标签之间的距离就是外边距

• 格式

• 单独设置四条边

• margin-top: ;

• margin-right: ;

• margin-bottom: ;

• margin-left: ;

• 示例代码

• 同时设置四条边

• margin: 上 右 下 左;

• 示例代码

• 注意点:

• 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

• 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

• 上 右 下 左 > 上 > 右下左边取值和上边一样

• 外边距的那一部分是没有背景颜色的

• 这三个属性的取值省略时的规律

• 外边距合并现象

• 默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

• 示例代码

• margin-top问题

• 如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来

• 如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性

• 在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)

• 示例代码

• text-align:center;和margin:0 auto;区别

• text-align: center; 是设置盒子中存储的文字/图片水平居中

• margin:0 auto;是让盒子自己水平居中

• 示例代码

盒模型

• 什么是CSS盒模型?

• CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型

• CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签

• 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以HTML标签又叫做盒模型

• 示例代码

• 盒模型宽度和高度

• 内容的宽度和高度

• 就是通过width/height属性设置的宽度和高度

• 元素的宽度和高度

• 增加了padding/border之后元素的宽高也会发生变化

• 如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高

• 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框

• 高度 同理可证

• 规律

• 元素空间的宽度和高度

• 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距

• 高度 同理可证

box-sizing属性

• CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

• box-sizing取值

• 元素的宽高 = width/height的宽高

• 增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

• 元素的宽高 = 边框 + 内边距 + 内容宽高

• content-box

• border-box

• 示例代码

清空默认边距

• 为什么要清空默认边距(外边距和内边距)

• 在企业开发中为了更好的控制盒子和方便计算盒子的宽高等等, 所以在企业开发中,编写代码之前,第一件事情就是清空默认的边距

• 如何清空默认的边距

• 注意点

• 通配符选择器会找导(遍历)当前界面中所有的标签, 所以性能不好

• 企业开发中可以从这个网址中拷贝

• http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

行高

• 什么是行高?

  在CSS中所有的行都有自己的行高

• 注意点:

• 行高和盒子高不是同一个概念

• 行高指的是每行内容的高度

• 盒子高指的是元素的高度

• 规律:

• 文字在行高中默认是垂直居中的

• 在企业开发中我们经常将盒子的高度和行高设置为一样, 那么这样就可以保证一行文字在盒子的高度中是垂直居中的

• 在企业开发中如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中

还原默认字体/字号/行高

• 利用firework可以还原网页中的字体/字号和行高

• 注意点:

• 在企业开发中, 如果一个盒子中存储的是文字, 那么一般情况下我们会以盒子左边的内边距为基准, 不会以右边的内边距为基准, 因为这个右边的内边距有误差

• 右边内边距的误差从何而来?

• 因为右边如果放不下一个文字, 那么文字就会换行显示, 所以文字和内边距之间的距离就有了误差

• 顶部的内边距并不是边框到文字顶部的距离, 而是边框到行高顶部的距离

更多视频更多下载，尽在bbs.520it.com