前端小册 - 浅谈CSS盒模型

CSS盒模型的知识点

1. 基本概念：标准盒模型和IE模型
2. 标准模型和IE模型的区别
3. CSS如何设置这两种模型
4. JS如何设置获取盒模型对应的宽和高
5. 解释边距重叠
6. BFC（边距重叠解决方案）/IFC

答：

1. 基本概念（略）
2. 标准模型的height和width只包括content、IE模型的height和width除了content还包括border和padding
3. 标准模型：box-sizing: content-box (默认)
   IE模型：box-sizing: border-box
4. JS如何设置获取盒模型对应的宽和高

• dom.style.width/height（只能获取到内联样式的宽和高，获取不到style节点和外链CSS样式的宽和高）
• dom.currentStyle.width/height（三种方式通过浏览器得到的是一个即时运行的结果，是渲染之后的CSS，但是只有IE支持）
• window.getComputedStyle(dom).width/height（支持浏览器兼容，通用性更好）
• dom.getBoundingClientRect().width/height（计算一个元素的绝对位置，根据视窗左上角做顶点，返回4个值top/width/height/left）

5. 边距重叠
   • 父子元素重叠：添加overflow:hidden相当于给父元素添加了一个BFC
   • 兄弟元素重叠：取两个属性中较大的值
   • 空元素设置上下边距：把margin-top和margin-bottom取最大值设为边距

注：垂直margin的合并在同一个BFC中才会发生，如果两个BFC就算它们的margin相遇了，也不会重叠融合的。

6. BFC（边距重叠解决方案）

   基本概念

   BFC（块级格式化上下文）
   IFC（内联格式化上下文）

   BFC原理

   1. BFC的边距垂直方向会发生重叠
   2. BFC区域不会与浮动元素的box重叠
   3. BFC在页面上是一个独立的容器，内外元素互不影响
   4. 计算BFC高度的时候，浮动元素也会参与计算

   如何创建BFC

   1. float的值不为none
   2. position的值不为static（默认）/ relative 可设置为
   3. display的值为inline-block 或 table 相关属性 table-cell/ table-caption/ table-column/ table-row
   4. overflow的值不为visible 可为hidden/ scroll/ auto/ inherit

以上四个条件都是针对父元素设置的，满足其一就可以生成BFC，即可清除浮动。

BFC使用场景

1. 清除浮动：BFC子元素即使是float也会参与高度计算
2. 解决垂直方向边距重叠
3. 内容增高导致侵染