CSS 盒模型分析

基本概念

页面中的每个元素都可以看成一个盒子，盒子里面可以装其他盒子，层层嵌套。html 标签就是最外面的大盒子。每个盒子由内向外分别是 content, padding, border, margin 。

盒子模型

分类

盒模型有两种，标准盒模型 和 IE盒模型 。主要区别是它们的 width 和 height 不同

• 标准盒模型

  
  
  标准盒模型

盒子宽高是 content(内容) 的宽高

• IE盒模型

  
  
  IE盒模型

盒子宽高是 border + padding + content 的宽高

浏览器默认使用标准盒模型，在 ie8+ 中 可以通过设置 box-sizing 样式属性改变盒模型


box-sizing:

• content-box ---> 标准盒模型（默认）
• border-box ---> IE 盒模型

通过js获取盒子宽高

以下 domElement 是表示 HTML 元素的伪代码

1. domElement.style.width/height

只能获取内联样式中的宽高

2. domElement.currentStyle.width/height

获取的是浏览中渲染完成后元素的宽高，只有 IE 浏览器支持

3. window.getComputedStyle(domElement).width/height

和方式2一样，但可以兼容更多浏览器

4. domElement.offsetWidth/offsetHeight

不管使用的什么盒模型，获取的都是 IE盒模型 的宽高

外边距折叠问题

相邻元素在竖直方向上的外边距在相遇时会发生合并，合并后的外边距的高度等于两个外边距中较大的那个值。

兄弟元素间

外边距重合

父子元素间

外边距重合

外边距折叠解决方案（BFC）

Block Formatting Context （块级格式化上下文）

BFC 可以简单地理解为某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。

怎样让元素创建 BFC

• float 的值不为 none （浮动元素）
• overflow 的值为 visible
• display 的值为 inline-block 、table-caption 、 table-cell 、flex 、inline-flex
• positon 的值为 absolute 或 fixed
• (根元素)

BFC 的布局规则

1. 内部的 box 会在垂直方向上一个接一个地放置 （平时说的块级元素一行行放）
2. box 间垂直方向的距离由 margin 决定 。同一个BFC中的两个相邻的 box 还是会产生外边距重叠问题
3. BFC 的区域不会与 浮动的 box 重叠
4. BFC 是一个独立的容器，里面的元素不会影响外面的元素，反之亦然。
5. 包含浮动元素，计算 BFC 的高度时，浮动的元素也会参与计算

BFC 的应用场景

• 分属于不同 BFC 的元素可以防止垂直外边距折叠
• 清除内部浮动（使浮动元素可以撑起父盒子）
• 自适应两栏布局（BFC 区域不会与浮动元素重叠）
• 防止元素被浮动元素覆盖

float + BFC 两栏布局:

    
left
    
right

---

阅读原文


参考文章：
关于CSS-BFC深入理解
css 盒子模型理解