盒模型是CSS中一個(gè)重要的概念，它是元素大小呈現(xiàn)的方式。如圖：

盒模型.png

CSS3中新增了一種盒模型計(jì)算方式：box-sizing。盒模型默認(rèn)的值是content-box，新增的值是padding-box和border-box，幾種盒模型計(jì)算元素寬高如下：

content-box（默認(rèn)）

布局所占寬度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疊加

在實(shí)踐中對(duì)網(wǎng)頁進(jìn)行布局時(shí)，它會(huì)造成很多混淆。簡(jiǎn)單地說，當(dāng)兩個(gè)或多個(gè)垂直邊距相遇時(shí)，它們形成一個(gè)外邊距，如圖。這個(gè)外邊距的高度等于兩個(gè)發(fā)生疊加的外邊距的高度中的較大者。但是只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距疊加。行內(nèi)框、浮動(dòng)框或者絕對(duì)定位框之間的外邊距不會(huì)疊加。

疊加.png