你知道盒模型吗？

在一个文档中，每个元素被当成一个盒子，这里说一下盒子的尺寸和外边距合并。

CSS 3 新属性 box-sizing ，这里讨论 box-sizing 的 content-box 和 border-box

content-box

默认值，标准盒模型，也就是 CSS 2.1 规定的盒模型

width/height = content

border-box

border-box 重新规定元素的宽高的计算规则

width/height = border + padding + content

测试：

页面中有两个元素

  
  


  
1
  
2

给他们添加样式

效果：

box-sizing.png

结论

可以看到，
在 content-box 标准盒模型下，元素的实际宽度 = 设置宽度 + padding + border ，其中 content = 设置宽度

在 border-box 盒模型下 ，元素的实际宽度 = 设置宽度，其中 content = 设置宽度 - padding - border，就是说内容区被缩小了

外边距合并

从上图中可以看到，两个盒子都设置了margin：30px，但是实际上下两个盒子高度只有30px

原因：相邻块元素，父元素与其最后一个子元素，空块元素会出现两个边距合并为较大的单个边距，即外边距合并，这是默认的渲染规则。

再深入：BFC，Block Formatting Context，块格式化上下文，给元素一个 BFC ，相当于给这个元素生成一个独立的块级区域，就不会发生外边距合并了。

形成 BFC 的条件

• 浮动元素，float 除 none 以外的值；
• 绝对定位元素，position（absolute，fixed）；
• display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
• overflow 除了 visible 以外的值（hidden，auto，scroll）