CSS第五天

盒子模型
一、三大特性☆
（层叠性、继承性、优先级）
1、CSS 三大特性之层叠性：对一个元素多次设置同一个样式，会使用最后一次设置的属性值。
1.1、层叠性的原则：

• 样式冲突，就近原则，后定义，后生效
• 样式不冲突，无论定义先后，始终有效

2、CSS 三大特性之继承性：子元素会继承父元素的某些样式，如文本颜色、字体属性等。
2.1、CSS 的继承性的好处：可以从一定程度上简化代码
2.2、行高的继承 ：

2.2.1、行高不跟单位表示什么含义？行高不跟单位表示文字大小的倍数，例如 1.5 表示以文字大小的 1.5 倍作为行高。
2.2.2、在 body 中指定行高 1.5 的最大优势是什么？子元素可以根据自己的文字大小自动调整行高。
3、 CSS 三大特性之优先级：当同一个元素被指定了多个选择器，需要掌握了 CSS 的优先级，才能准确地分析出到底会应用哪个选择器中的样式。
3.1、选择器的权重：（|继承或 * |权重：0,0,0,0）（|标签选择器|权重：0,0,0,1）（|类选择器或伪类选择器|权重：0,0,1,0）（|id 选择器 |权重：0,1,0,0）（|行内样式 |权重：1,0,0,0）（|!important |权重：∞）
3.2、注意：权重的数字不能进位，类选择器永远大于标签选择器吗？对！
继承的权重为零。
3.3、权重的叠加：在使用复合选择器时需要考虑权重的叠加，权重的叠加不不能进位

二、盒子模型原理
1、看透网页的本质
1.1、网页布局的三大核心：盒子模型 → 浮动 → 定位
1.2、网页布局过程三步走：

• 准备素材，网页元素基本都是盒子
• 用 CSS 设置好盒子样式，然后摆放到相应位置
• 往盒子里面装内容

1.3、网页布局的核心本质是利用 CSS 摆盒子。
1.4、CSS 盒子模型包含哪四个部分？

• 实际内容（教室中的桌椅）
• 内边距（桌椅距离四周墙的距离）
• 边框（教室的墙壁）
• 外边距（教室四周距离其他教室的距离）
  三 、盒子模型 - 边框 border
  1、在 CSS 中可以通过border属性来设置边框。
  2、能够设置哪些边框样式？
• border-width ：边框粗细，单位是 px
• border-style ：solid 实线 / dashed 虚线 / dotted 点线
• border-color： 边框的颜色

3、边框的复合写法：写法没有顺序要求，推荐写法是 border: 1px solid #000;
4、表格细线边框：border-collapse: collapse; 可以把相邻的边框合并到一起。
4.1、border-collapse: collapse; 适用于任何场景么?
border-collapse: collapse; 属性仅仅适用于表格, 例如两个div的div边框紧紧相连使用该属性是不会生效的
5、边框会影响盒子实际大小
5.1、边框会影响一个盒子的实际大小吗？答案是会的。
5.2、如何解决？

• 测量盒子大小时，不测量边框；
• width / height 减去边框宽度。

四、盒子模型 - 内边距 padding
1、应用场景：设置内容与边框之间的距离。
2、设置盒子四个方向的内边距

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

3、padding 复合属性
3.1、内边距的复合写法

• padding: 5px; 含义：四周都是 5px；
• padding: 5px 10px; 含义：上下 5px / 左右 10px；
• padding: 5px 10px 20px; 含义：上 5px / 左右 10px / 下 20px；
• padding: 5px 10px 20px 30px;含义： 上 / 右 / 下 / 左，顺时针；

4、padding 会影响盒子实际大小
4.1、padding 会影响一个盒子的实际大小吗？答案是会的。
4.2、如何解决？width / height 减去多出来的 padding

五、盒子模型 - 外边距 margin
1、外边距的应用场景：控制盒子与盒子之间的距离
2、给一个盒子分别设置四个方向的外边距

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

3、复合写法（同padding的写法一致）
4、外边距典型应用-块级盒子水平居中对齐
4.1、用外边距实现盒子水平居中的两个条件是什么？

• 盒子必须有宽度
• 水平间距设置为 auto

4.2、写法：

• margin: auto;
• margin: 0 auto；
• margin-left: auto; margin-right: auto;

5、 外边距合并-相邻块元素垂直外边距
5.1、相邻元素垂直外边距合并的情况，如何解决？

• 上面的盒子有 margin-bottom ，下面的盒子有 margin-top ，取最大值
• 解决办法：只设置一个盒子的 margin

6、外边距合并-嵌套块元素塌陷
6.1、嵌套块元素塌陷的情况

• 父子元素同时具有上外边距
• 父元素会塌陷较大的外边距

6.2、有几种解决方案？

• 顶部增加边框
• 顶部增加 padding
• overflow: hidden; 推荐

7、清除内外边距
7.1、开发时为什么要做清除内外边距的事情？

• 网页元素很多都带有默认的内外边距，而且浏览器的默认值也不尽相同
• 清除内外边距可以避免默认样式对布局的干扰

7.2、清除内外边距的方案

* {
margin: 0;
padding: 0;
}

7.3、行内元素在设置内外间距时有什么需要注意的？
尽量只设置左右内外间距，不要设置上下内外间距。

持之以恒！！！！！！！冲冲冲！！！！！