浅谈CSS盒模型

Chrome调试工具下的盒子模型

CSS盒模型的知识点

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

答：

1. 基本概念（略）

2. 标准模型和IE模型 height 和 width 计算方式不同
   标准模型：只包括 content
   IE模型：content + padding + border

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
     应用：计算一个元素的绝对位置，以视窗（Viewport）左上角为顶点，返回4个值top width height left。

5. 边距重叠
   纵向 margin 重叠

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

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

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

   基本概念

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

   BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。

   BFC原理

   1. 内部的box会在垂直方向，一个接一个地放置
   2. box垂直方向的距离由margin决定。
      属于同一个BFC的两个相邻box的margin，边距垂直方向会发生重叠
   3. BFC区域不会与浮动元素的box重叠
   4. BFC在页面上是一个独立的容器，内外元素互不影响
   5. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
   6. 计算BFC高度的时候，浮动元素也会参与计算

   浮动清理利用的主要是第六条规则，只要将父容器触发为BFC，就可以实现包含的效果。

   如何创建BFC

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

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

   BFC使用场景

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

盒子模型拓展问题

1. 为什么看起来content-box更合理，但是还是经常使用border-box？
   答：有时候在content-box元素的基础上添加内边距padding或border会将布局撑破，但是使用border-box就可以轻松完成。