什么是CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：外邊距(padding)，邊框(border)，內邊距(margin)，和實際內容(content)。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
瀏覽器的兼容性問題
一旦為頁面設置了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標准模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
ie盒子模型如下所示
IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在標准兼容模式下使用的是W3C的盒模型標准。我們說這是一個好消息因為這意味着此盒模型問題
只會出現在IE5.5及其更早的版本中。只要為文檔設置一個DOCTYPE，就會使得IE遵循標准兼容模式的方式工作。
另外，css3的box-sizing屬性給了開發者選擇盒模型解析方式的權利。W3C的盒模型方式被稱為content-box，IE的被稱為border-box
標准模型-width與height按照content寬高計算，而IE模型-width與height則按照content+padding+border計算；
* {
box-sizing：content-box; // 標准盒模型
box-sizing：border-box; // IE盒模型
}