盒模型

盒模型定義了元素的內容，內邊距，邊框，外邊距的大小，現代 Web 佈局設計簡單說就是一堆盒子的排列與嵌套，IE6和w3c標準對盒模型的解釋是不一樣的。

可是在全部瀏覽器中的盒模型的結構都是下面這樣的：

在內容區外面，依次圍繞着 padding 區，border 區，margin 區，這一模型結構在全部主流瀏覽器都是一致的。經過盒子模型，咱們能夠爲咱們的內容設置邊界，留白以及邊距，盒子模型最典型的應用是這樣：咱們有一段內容，能夠爲這段內容設置一個邊框，爲了讓內容不至於緊挨着邊框，能夠設置 padding ，爲了讓這個盒子不至於和別的盒子靠得太緊，能夠設置 margin。

可是IE6和W3C標準對盒模型的寬度的解釋是不一樣的。

IE6以前和IE6-IE8在怪異模式下時顯示一個頁面時，width和height屬性是包含內容區域寬度和內邊距，邊框的寬度的。

在 CSS3 中，引進了box-sizing這個屬性，默認值是content-box,表示標準盒模型，box-sizing:border-box;則瀏覽器會使用IE的盒模型。若是使用百分比表示盒子的總寬度，用像素值表示邊框和邊距值時，使用border-box就特別有用。而且使用邊框盒模型能夠使用盒子尺寸的計算值：

<div style="width:calc(50%-12px);padding:10px;border:solid black 2px;">