W3C的標準盒模型：

IE的傳統盒模型：

實例：

1.W3C 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分

2.IE 盒子模型的范圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading

用內外盒來說的話，W3C標準瀏覽器的內盒寬度等于IE6以下版本瀏覽器的外盒寬度

下面開始我們今天的主題——CSS3的Box-sizing：

取值說明：

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】）

3.為了更能形像看出box-sizing中content-box和border-box兩者的區別，我們先簡單來看一人示例圖，如下所示

從圖上可以看出來，給W3C盒模型的元素設置的width屬性值208px就只指定content的寬度，并不包括padding和border。而給IE盒模型的元素設置相同的width值208px是包涵了padding和border的

注：box-sizing現代瀏覽器都支持，但IE家族只有IE8版本以上才支持，雖然現代瀏覽器支持box-sizing，但有些瀏覽器還是需要加上自己的前綴，Mozilla需要加上-moz-，Webkit內核需要加上-webkit-，Presto內核-o-,IE8-ms-，所以box-sizing兼容瀏覽器時需要加上各自的前綴

實例1：

上面主要介紹了box-sizing的理論知識，我們還是理論和實踐結合吧，下面就一起先來看一個簡單點的例子

上面效果圖讓大家很明顯的區分開了content-box和border-box的區別了，為了更好的理解，我截了一份他們在Firebug下的一layout分析圖

結論：Layout分析圖再次證明了box-sizing:content-box是維持了W3C的標準Box Model，而box-sizing:border-box是維持了IE傳統（IE怪異模式）下的Box Model。

那么box-sizing主要運用在哪些方面呢？我總結了一下，第一點就是我們布局上，第二點就是表單元素上。為什么呢？我想大家在平時布局中都有碰到當兩個塊元素的寬度剛好是其父元素總寬度時我們布局不會有任何問題，但當你在其中一個塊加上padding或border時（哪怕是1px）整個布局就會完全打亂，因為其總寬度超過了父元素的寬度。第二點表單元素，前面我提到過，form有很多元素還是使用的IE傳統Box Model，針對這兩點，box-sizing將在其身上發揮強大的作用

實例2：box-sizing拯救我們的布局

為了能更好的說明問題，我們先來模仿一個兩欄布局，先來看其HTML Code

簡單的分析一下，這里把LayoutDemo的div當作我們頁中的body，而div#header是頁面頭部，div#left是頁面左邊欄，div#main-content是頁面主內容，div#footer是頁面的頁腳，下面我們來模仿一個960的布局(比例縮小一半)，我們加上平時布局的樣式上去

到目前布局來說一點問題都沒有，那是因為我們子元素寬度加起來剛好與元素的是相等，那么我們現在來變動一下，如果根據設計需要，每個塊中內容都離邊緣有10px的距離，那么我們先來看看基header,left,main-content,footer這幾個塊加一個padding:10px，看看有什么變化

上圖清晰告訴我們，加了一個padding,惡夢就開始來了，header,footer撐破容器伸出去了，main-content也被掉到left的下面了。跟剛才當初的效果可是完全不一樣的呀，有人可能會問，如果我不使用padding我只使用border什么怎么樣呢？大家猜猜會怎么樣？不用猜了，馬上換個代碼給大家看看，我們只要把剛才的padding注掉換成border，如下所示

上圖是去掉了padding只加了10px的邊框,同樣把布局給打亂了。接著把padding和border同時加進去，反正都撐破了布局，就破罐子破摔。加上的效果如下

不上我說，大家都知道上圖是因為加上了padding和border把布局給打亂了，下面主要看如何用box-sizing來修復這個撐破的布局，前面介紹了，上圖中box-sizing是取了其默認值content-box，其Box Model完全符合W3C的標準，為了修復這樣的布局，我們需要把Box Model改用IE傳統下的解析，這樣一加，我們給他加上下面box-sizing屬性

總結

以上是生活随笔為你收集整理的CSS之Box-sizing的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。