box-sizing用於改變cswww.cppcns.coms盒子模型，從而改變元素寬高的計算方式。
box-sizing取值如下：
複製**
**如下:
box-sizing: content-box | padding-box | border-box
預設值是 content-box ，對應css2.1規範中標準的盒子模型計算方式，即 width 和 height 是內容區的寬與高， 不包括邊框，內邊距，外邊程式設計客棧距；
padding-box 根據mdn的說法，目前還是乙個實驗性的屬性， width 和 height 包括內容區和內邊距，不包括邊框和外邊據；
border-box 包括內邊距與邊框，不包括外邊距。這是ie 怪異模式（quirks mode）使用的 盒模型 。
例子（摘自mdn）
複製**
**如下:
/* support firefox, webkit, opera and ie8+ */
.example
對js的影響
根據mdn的敘述：
由window.getcomputedstyle 獲取height時不會考慮 至少 firefox 18 (bug 520992) 與 internet explorer 9 是這樣, 不過chrome 24 不是(其它瀏覽器未測試). 注意 ie9 currentstyle 不能返回正確的height值。
關於firefox 18及ie9之後的版本，我還沒有測試。
關於jquery中 .width() 和 .height() 的返回值
jquery 1.8 版本之後增加了對 box-sizing 的支援，但這還與瀏覽器是否支援 box-sizing 有關，簡而言之，1.8版本之後， .width() 和 .height() 返回的永遠都是內容區的寬和高，見如下**：
複製**
**如下:
程式設計客棧f-8"/>
各瀏覽器列印結果如下
ie6/7 : 500
ie8/9/10: 480
safari5/6: 480
chrome21/firefox14: 480
ie6/7不支援box-sizing，內容區的寬度是500，所以輸出的值也是500，而其他支援該屬性的瀏覽器，內容區寬度減去了 padding 和 border 的值，變成了480.
另：jquery中的 .outerwidth() 和 .outerheight() 方法不受影響。
本文標題: css3屬性box-sizing使用指南
本文位址:
CSS3中的box sizing屬性
box sizing屬性是css3中新新增的屬性，用來替換原來的css盒子模型，box sizing屬性值的不同，元素的高度和寬度的計算方法也不同。box sizing的三個屬性值，我們只針對前兩個說明 box sizing content box box sizing border box box...
CSS3新屬性篇 四 box sizing屬性
在css中，你設定乙個元素的 width 與 height 只會應用到這個元素的內容區。如果這個元素有任何的 border 或 padding 繪製到螢幕上時的盒子寬度和高度會加上設定的邊框和內邊距值。這意味著當你調整乙個元素的寬度和高度時需要時刻注意到這個元素的邊框和內邊距。當我們實現響應式布局時...
CSS3中盒子的box sizing屬性
box sizing 屬性box sizing 屬 性用來改變預設的 css盒模型 對元素寬高的計算方式。這個屬性可以用於模擬那些非正確支援標準盒模型的瀏覽器的表現。box sizing content box default border box content box 預設值，標準盒模型。wid...