一、基本概念
CSS 盒模型本质上是一个盒子，盒子包裹着HTML 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距 margin。
1.png
二、盒模型分类
-
W3C 盒子模型(标准盒模型)
标准模型元素宽度width=content，高度计算相同，如下图所示：
3.png -
IE 盒子模型(怪异盒模型)
IE模型元素宽度width=content+padding+border，高度计算相同，如下图所示：
2.png
三、如何在CSS 设置这两个模型
标准盒模型： box-sizing: content-box
IE盒子模型：box-sizing: border-box
四、外边距重叠
当两个垂直外边距相遇时，他们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并。
4.png
