W3C的標(biāo)準(zhǔn)盒模型：

IE的傳統(tǒng)盒模型：

實(shí)例：

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

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

用內(nèi)外盒來說的話，W3C標(biāo)準(zhǔn)瀏覽器的內(nèi)盒寬度等于IE6以下版本瀏覽器的外盒寬度

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

取值說明：

1.content-box:此值為其默認(rèn)值，其讓元素維持W3C的標(biāo)準(zhǔn)Box Model，也就是說元素的寬度/高度（width/height）等于元素邊框?qū)挾?#xff08;border）加上元素內(nèi)邊距（padding）加上元素內(nèi)容寬度/高度（content width/height）即：Element Width/Height = border+padding+content width/height

2.border-box:此值讓元素維持IE傳統(tǒng)的Box Model（IE6以下版本），也就是說元素的寬度/高度等于元素內(nèi)容的寬度/高度。（從上面Box Model介紹可知，我們這里的content width/height包含了元素的border,padding,內(nèi)容的width/height【此處的內(nèi)容寬度/高度=width/height-border-padding】）

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

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

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

實(shí)例1：

上面主要介紹了box-sizing的理論知識，我們還是理論和實(shí)踐結(jié)合吧，下面就一起先來看一個(gè)簡單點(diǎn)的例子

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

結(jié)論：Layout分析圖再次證明了box-sizing:content-box是維持了W3C的標(biāo)準(zhǔn)Box Model，而box-sizing:border-box是維持了IE傳統(tǒng)（IE怪異模式）下的Box Model。

那么box-sizing主要運(yùn)用在哪些方面呢？我總結(jié)了一下，第一點(diǎn)就是我們布局上，第二點(diǎn)就是表單元素上。為什么呢？我想大家在平時(shí)布局中都有碰到當(dāng)兩個(gè)塊元素的寬度剛好是其父元素總寬度時(shí)我們布局不會(huì)有任何問題，但當(dāng)你在其中一個(gè)塊加上padding或border時(shí)（哪怕是1px）整個(gè)布局就會(huì)完全打亂，因?yàn)槠淇倢挾瘸^了父元素的寬度。第二點(diǎn)表單元素，前面我提到過，form有很多元素還是使用的IE傳統(tǒng)Box Model，針對這兩點(diǎn)，box-sizing將在其身上發(fā)揮強(qiáng)大的作用

實(shí)例2：box-sizing拯救我們的布局

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

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

到目前布局來說一點(diǎn)問題都沒有，那是因?yàn)槲覀冏釉貙挾燃悠饋韯偤门c元素的是相等，那么我們現(xiàn)在來變動(dòng)一下，如果根據(jù)設(shè)計(jì)需要，每個(gè)塊中內(nèi)容都離邊緣有10px的距離，那么我們先來看看基header,left,main-content,footer這幾個(gè)塊加一個(gè)padding:10px，看看有什么變化

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

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

不上我說，大家都知道上圖是因?yàn)榧由狭藀adding和border把布局給打亂了，下面主要看如何用box-sizing來修復(fù)這個(gè)撐破的布局，前面介紹了，上圖中box-sizing是取了其默認(rèn)值content-box，其Box Model完全符合W3C的標(biāo)準(zhǔn)，為了修復(fù)這樣的布局，我們需要把Box Model改用IE傳統(tǒng)下的解析，這樣一加，我們給他加上下面box-sizing屬性

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。