box-sizing是CSS3的box屬性之一。遵循CSS的Box model原理，爲了能更好的學習和理解這個Box-sizing屬性，我們有必要先了解一下CSS中Box model的原理。
CSS中Box model是分爲兩種，第一種是W3C的標準模型，另一種是IE的傳統模型，他們相同之處都是對元素計算尺寸的模型，具體說就是對元素的width,height,padding,border以及元素實際尺寸的計算關係；他們不同之處呢？兩者的計算方法不一至：
1、W3C的標準Box Model:
/外盒尺寸計算（元素空間尺寸）/
Element空間高度 = content height + padding + border + margin
Element 空間寬度 = content width + padding + border + margin
/內盒尺寸計算（元素大小）/
Element Height = content height + padding + border （Height爲內容高度）
Element Width = content width + padding + border （Width爲內容寬度）
2、IE)傳統下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:
/外盒尺寸計算（元素空間尺寸）/
Element空間高度 = content Height + margin (Height包含了元素內容寬度，邊框寬度，內距寬度)
Element空間寬度 = content Width + margin (Width包含了元素內容寬度、邊框寬度、內距寬度)
/內盒尺寸計算（元素大小）/
Element Height = content Height(Height包含了元素內容寬度，邊框寬度，內距寬度)
Element Width = content Width(Width包含了元素內容寬度、邊框寬度、內距寬度)
語法：
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現代瀏覽器都支持，但IE家族只有IE8版本以上才支持，雖然現代瀏覽器支持box-sizing，但有些瀏覽器還是需要加上自己的前綴，Mozilla需要加上-moz-，Webkit內核需要加上-webkit-，Presto內核-o-,IE8-ms-，所以box-sizing兼容瀏覽器時需要加上各自的前綴：
/*Content box*/
Element {
-moz-box-sizing: content-box; /*Firefox3.5+*/
-webkit-box-sizing: content-box; /*Safari3.2+*/
-o-box-sizing: content-box; /*Opera9.6*/
-ms-box-sizing: content-box; /*IE8*/
box-sizing: content-box; /*W3C標準(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c標準語法)*/}
/*Border box*/
Element {
-moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing: border-box; /*W3C標準(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c標準語法)*/}
