網絡癱瘓上不了網？電腦出故障？找破解軟件？加入創想工作室QQ群，向大神求助，一步解決問題！QQ群號碼：18345199。[點此獲取更多QQ群]
content-box是默認值。如果你設置一個元素的寬為100px，那么這個元素的內容區會有100px寬，并且任何邊框和內邊距的寬度都會被增加到最后繪制出來的元素寬度中。
border-box 告訴瀏覽器去理解你設置的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px,那么這100px會包含其它的border和padding，內容區的實際寬度會是width減去border + padding的計算值。大多數情況下這使得我們更容易的去設定一個元素的寬高。
語法：
box-sizing ： content-box || border-box || inherit
取值說明：
1、content-box:此值為其默認值，其讓元素維持W3C的標準Box Model，也就是說元素的寬度/高度（width/height）等于元素邊框寬度（border）加上元素內邊距（padding）加上元素內容寬度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。
2、border-box:此值讓元素維持IE傳統的Box Model（IE6以下版本），也就是說元素的寬度/高度等于元素內容的寬度/高度。（從上面Box Model介紹可知，我們這里的content width/height包含了元素的border,padding,內容的width/height【此處的內容寬度/高度=width/height-border-padding】）。
為了更能形像看出box-sizing中content-box和border-box兩者的區別，我們先簡單來看一人示例圖，如下所示：
兼容瀏覽器
box-sizing現代瀏覽器都支持，但IE家族只有IE8版本以上才支持，雖然現代瀏覽器支持box-sizing，但有些瀏覽器還是需要加上自己的前綴，Mozilla需要加上-moz-，Webkit內核需要加上-webkit-，Presto內核-o-,IE8-ms-，所以box-sizing兼容瀏覽器時需要加上各自的前綴：
Element {-moz-box-sizing: content-box;-webkit-box-sizing: content-box;-o-box-sizing: content-box;-ms-box-sizing: content-box;box-sizing: content-box;}Element {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
