盒子模型 主要有兩種，w3c標准盒模型，IE下的怪異盒模型，其實還有就是彈性盒模型(上篇文章我們用他很好的解決了對齊問題)
DTD規范
盒模型分為：標准w3c盒模型、IE盒模型、以及css中的伸縮盒模型
當我們使用編輯器創建一個html頁面時，我們一定會發現最頂上的DOCTYPE標簽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML>
這些doctype都是標准的文檔類型，無論我們使用哪種模式都會觸發標准模式，而如果doctype缺失，則在ie6、ie7、ie8將會觸發怪異模式(quirks);
一旦為頁面設置了恰當的DTD(文檔定義類型),大多數瀏覽器都會按照標准盒模型來呈現內容，但是ie5和ie6的呈現卻是不正確的.
根據w3c規范，元素內容占據空間是由width屬性設置的，而內容周圍的padding和border都是另外計算的。
不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標准模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
舉個栗子
我們用一個div塊來演示標准模式和怪異模式的區別：
.box{
width:200px;
height:200px;
border:20px solid black;
padding:50px;
margin:50px;
}
標准盒模型
在標准模式下的盒模型如下圖所示，盒子總寬度/高度=width/height+padding+border+margin
怪異模式
在怪異模式下的盒模型如下圖所示，盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的
盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;
也即是說 width = 內容區寬度 + padding + border
CSS3的box-sizing屬性
語法：
box-sizing : content-box || border-box || inherit;
在css3中新增了box-sizing屬性，具備了以上知識后，我們已經理解：
- 當為content-box時，將采取標准模式進行解析計算
- 當為border-box時，將采取怪異模式解析計算
- 當為inherit時，將從父元素來繼承box-sizing屬性的值
參考