CSS盒子模型

盒子模型

CSS三大特性

继承性、层叠性、优先级

优先级比较

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意：!important不能提升继承的优先级，只要是继承优先级最低

复合选择器权重叠加计算公式

每一级之间不存在进位

比较规则：

1. 先比较第一级数字，如果比较出来了，之后的统统不看

2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看

3. ……

4. 如果最终所有数字都相同，表示优先级相同，则比较层叠性

注意点：!important如果不是继承，则权重最高！

外边距折叠现象 – ① 合并现象

场景：垂直布局的块级元素，上下的margin会合并

结果：最终两者距离为margin的最大值

解决方法：只给其中一个盒子设置margin即可

外边距折叠现象 – ② 塌陷现象

场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上

结果：导致父元素一起往下移动

解决方法：

1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

2. 给父元素设置overflow：hidden

3. 转换成行内块元素

4. 设置浮动

行内元素的margin和padding无效情况

场景：给行内元素设置margin和padding时

结果：

1. 水平方向的margin和padding布局中有效！
2. 垂直方向的margin和padding布局中无效！