標準盒模型與怪異盒模型 + box-sizing

標準盒模型(w3c標準)

全部HTML元素能夠看做盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

在標準盒模型中，width 和 height 指的是內容區域的寬度和高度。增長內邊距、邊框和外邊距不會影響內容區域的尺寸，可是會增長元素框的總尺寸。

在標準盒模型中：盒子佔位width = width + 2 margin + 2padding + 2*border,高度與之同樣。
盒子真正德width = width + 2 padding + 2border。 margin不算！margin能夠改變盒子佔位的大小，可是盒子的寬高並無改變，而是位置的改變！

根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用本身的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。

怪異盒模型

ie 盒子模型的 content 部分包含了 border 和 pading

要讓網頁按標準盒模型去解析，則須要加上 doctype聲明，不然不一樣的瀏覽器會按照本身的標準去解析。

box-sizing

box-sizing 屬性容許你以某種方式定義某些元素，以適應指定區域。
例如，假如您須要並排放置兩個帶邊框的框，可經過將 box-sizing 設置爲 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。

box-sizing相似於ie盒模型，它會把內邊距和邊框包含在width內。在實際工做中，咱們設置一個固定寬度的盒子，但當給它設置padding、border以後，它的真正寬度就會改變。這時box-sizing就派上用途了。它會自動調整內容的寬度，保證盒子的真正寬度仍是咱們設置的寬度。

能夠查看實例：box-sizing實例