CSS盒模型

盒模型是CSS中一个重要的概念，它是元素大小呈现的方式。如图：

盒模型.png

CSS3中新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box，新增的值是padding-box和border-box，几种盒模型计算元素宽高如下：

content-box（默认）

布局所占宽度Width:
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom +border-top + border-bottom

padding-box

布局所占宽度Width:
Width = width(包含padding-left + padding-right) + border-left + border-right
布局所占高度Height：
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

布局所占宽度Width:
Width = width(包含 padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom +border-top + border-bottom);

margin叠加

在实践中对网页进行布局时，它会造成很多混淆。简单地说，当两个或多个垂直边距相遇时，它们形成一个外边距，如图。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。但是只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或者绝对定位框之间的外边距不会叠加。

叠加.png