CSS3盒模型是CSS技術(shù)所使用的一種思維模型，指在一個(gè)網(wǎng)頁文檔中，每個(gè)元素都被呈現(xiàn)為一個(gè)矩形的盒子，描述了元素所占空間的內(nèi)容。css有兩種盒模型：W3C盒模型（標(biāo)準(zhǔn)盒模型）和IE盒模型（怪異盒模型）。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

1、什么是CSS盒模型

CSS3盒模型就是CSS技術(shù)所使用的一種思維模型，指在一個(gè)網(wǎng)頁文檔中，每個(gè)元素都被呈現(xiàn)為一個(gè)矩形的盒子，描述了元素所占空間的內(nèi)容。

盒模型，顧名思義，就是一個(gè)盒子。生活中的盒子，有長寬高，盒子本身也有厚度，可以用來裝東西。頁面上的盒模型我們可以理解為，從盒子頂部俯視所得的一個(gè)平面圖，盒子里裝的東西，相當(dāng)于盒模型的內(nèi)容（content）；東西與盒子之間的空隙，理解為盒模型的內(nèi)邊距（padding）；盒子本身的厚度，就是盒模型的邊框（border）；盒子外與其他盒子之間的間隔，就是盒子的外邊距（margin）。

元素的外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、內(nèi)容（content）就構(gòu)成了CSS盒模型。

圖1. 盒模型示意圖

2、IE盒模型和W3C盒模型

CSS盒模型分為IE盒模型（圖2）和W3C盒模型（圖3）。其實(shí)，IE盒模型是怪異模式（Quirks Mode）下的盒模型，而W3C盒模型是標(biāo)準(zhǔn)模式（Standards Mode）下的盒模型。

IE6及其更高的版本，還有現(xiàn)在所有標(biāo)準(zhǔn)的瀏覽器都遵循的是W3C盒模型，IE6以下版本的瀏覽器遵循的是IE盒模型。

圖2. IE盒模型

圖3. W3C盒模型

從上圖直觀的可以看出，IE盒模型的寬度或者高度計(jì)算方式為：width/height = content + padding + border，W3C盒模型的寬度或者高度計(jì)算方式為：width/height = content。

舉一個(gè)簡單的例子：一個(gè)div的寬度和高度為100px，內(nèi)邊距為10px，邊框?yàn)?px，外邊距為30px。圖4為不同模型下顯示的結(jié)果，W3C盒模型下顯示的div所占的總寬度和總高度（包括外邊距、邊框、內(nèi)邊距、內(nèi)容）為100 + 10 + 5 + 30 = 145px，IE盒模型下顯示的div所占的總寬度和總高度（包括外邊距、邊框、內(nèi)邊距、內(nèi)容）為100 + 30 = 130px。很明顯的區(qū)別，如果元素的寬度（width）一定的情況下，W3C盒模型的寬度（width）不包括內(nèi)邊距和邊框，IE盒模包括。

代碼如下：

<style>   .content {background: #eee; height: auto;border: 1px solid blue;}   .div {width: 100px;height: 100px;margin: 30px;padding: 10px;border: 5px solid blue;}   .div-01 {background: orange;}   .div-02 {background: yellow;box-sizing: border-box;} </style> <div class="content">   <div class="div div-01">div01</div>   <div class="div div-02">div02</div> </div>

頁面效果如下：

圖4. 區(qū)別

3、CSS3屬性box-sizing

如果計(jì)算一個(gè)盒子的長寬高，我們一般都是盒子本身的厚度加上盒子里的空間大小，所在在IE盒模型和W3C盒模型，我們會覺得IE盒模型更符合邏輯。（學(xué)習(xí)視頻分享：css視頻教程）

不同的人有不同的習(xí)慣，所以CSS3新增了一個(gè)屬性box-sizing: content-box | border-box | inherit，默認(rèn)值為content-box。如果值為content-box，那元素遵循的是W3C盒模型；如果值為border-box，那元素遵循的是IE盒模型；如果值為inherit，該屬性的值應(yīng)該從父元素繼承。

4、關(guān)于盒模型的使用

有沒有人和我一樣，覺得屬性box-sizing真是個(gè)好東西，只需設(shè)置所有元素的該屬性為content-box或者border-box，滿足自己的習(xí)慣。

雖說現(xiàn)在的瀏覽器都兼容該屬性（如上圖），還是得以防萬一，在屬性前最好暫時(shí)加-webkit-和-moz-前綴。

* {   -webkit-box-sizing: content-box;   -moz-box-sizing: content-box;   box-sizing: content-box; }

在上圖，我們看到IE兼容屬性box-sizing必須是8或者更高的版本，其他瀏覽器都可以自動升級，兼容性不擔(dān)心，那如果是IE7、IE6或者更低的版本，怎么辦？還有，如果我們不用該屬性，那瀏覽器該選擇哪種盒模型呢？

其實(shí)，瀏覽器選擇哪個(gè)盒模型，主要看瀏覽器處于標(biāo)準(zhǔn)模式（Standards Mode）還是怪異模式（Quirks Mode）。我們都記得<!DOCTYPE>聲明吧，這是告訴瀏覽器選擇哪個(gè)版本的HTML，<!DOCTYPE>后面一般有DTD的聲明，如果有DTD的聲明，瀏覽器就是處于標(biāo)準(zhǔn)模式；如果沒有DTD聲明或者HTML4一下的DTD聲明，那瀏覽器按照自己的方式解析代碼，處于怪異模式。

處于標(biāo)準(zhǔn)模式的瀏覽器（IE瀏覽器版本必須是6或者6以上），會選擇W3C盒模型解析代碼；處于怪異模式的瀏覽器，則會按照自己的方式去解析代碼，IE6以下則會是選擇IE盒模型，其他現(xiàn)代的瀏覽器都是采用W3C盒模型。

因?yàn)镮E6以下版本的瀏覽器沒有遵循Web標(biāo)準(zhǔn)，不論頁面開頭有沒有DTD聲明，它都是按照IE盒模型解析代碼的。