CSS基本知識3-CSS盒模型

box-sizing: content-box|border-box|inherit;

值	描述
content-box	這是由 CSS2.1 規定的寬度高度行爲。 寬度和高度分別應用到元素的內容框。 在寬度和高度以外繪製元素的內邊距和邊框。
border-box	爲元素設定的寬度和高度決定了元素的邊框盒。 就是說，爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。 經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。
inherit	規定應從父元素繼承 box-sizing 屬性的值。

 

 

 

 

 

 

 

 

 

 

 

這裏頭的問題在於，CSS2.1規定默認是content-box,即W3C標準模型，另外一種爲IE傳統模型也叫怪異模型border-box。

固然現實是很殘酷的，看看如今的Bootstrap或Foundation，都又使用了border-box模式，這說明什麼？說明IE一開始幹對了，W3C把這事給搞錯了。遵循W3C的佈局，帶來了不少潛在問題，這是一個巨大的災難，雖然沒有人指出這一點。

這二者的差別主要是，W3C的Width（Height)計算，不包含Padding和Border，Border-box模式，Width包括內容，Padding，Border。

後者的好處是很是明顯的，好比我定義一個Width：200px的DIV，後來我又要給加個1px邊框，這下好了，W3C標準下，佈局亂了，要不就得從新調整Width等，變成了

Width:199px;border:1px，計算起來至關麻煩，這在多個嵌套DIV裏，加邊框及改變Padding的時候尤爲麻煩。

使用傳統模式：就明顯的分佈了盒內和盒外，外邊就是Margin，裏邊就是Width，這樣計算起來簡單多了。

另外一個問題是Form表單元素多使用border-box模式。

那麼，使用border-box模式來佈局，就須要注意瀏覽器兼容性，考慮到Bootstrap等的應用，及移動應用，應該選擇全站border-box模式。

遺憾的是，如今的絕大多數網站使用了默認的content-box模式，而新型的Bootstrap等使用了全局的border-box模式。

如何修復二者的不兼容？

固然所有改正也是應該的，但不想大改的狀況下，在引入Bootstrap等框架後，把原來佈局出錯的部分，加上：box-sizing:content-box屬性。

更詳細的參考此文：

http://www.w3cplus.com/content/css3-box-sizing