盒子模型是CSS中一個(gè)重要的概念，理解了盒子模型才能更好的排版和布局。盒子模型有兩種，分別是 IE 盒子模型和標(biāo)準(zhǔn) W3C 盒子模型。

盒模型的結(jié)構(gòu)

1.content(內(nèi)容):用來(lái)展示文字和圖片

2.padding(內(nèi)邊距):內(nèi)容與邊框的距離

3.border(邊框):元素的邊框

4.margin(外邊距):元素與元素之間的距離(父子元素,兄弟元素)

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

包括margin、border、padding、content，并且 content 部分不包含其他部分。

也就是標(biāo)準(zhǔn)盒模型的寬度就是內(nèi)容的寬度。

IE 盒子模型：

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

舉個(gè)栗子：

一個(gè)盒子的 margin 為 20px，border 為 5px，padding 為 10px，content 的寬為 200px，如果用標(biāo)準(zhǔn) 盒子模型解釋?zhuān)敲催@個(gè)盒子需要占據(jù)的位置為：寬 20*2 +5*2+10*2+200=270px，盒子的實(shí)際寬度為：5*2+10*2+200=230px；如果用IE盒子模型，那么這個(gè)盒子需要占據(jù)的位置為：寬 20*2+200=240px，盒子的實(shí)際寬度依然是： 200px。

CSS3中有個(gè)屬性:box-sizing，能改變盒子的模型標(biāo)準(zhǔn):

border-box（IE盒模型 )

content-box（W3C盒模型）

怪異盒子模型

怪異模式是“部分瀏覽器在支持W3C標(biāo)準(zhǔn)的同時(shí)還保留了原來(lái)的解析模式”，怪異模式主要表現(xiàn)在IE內(nèi)核的瀏覽器。

當(dāng)不對(duì)doctype進(jìn)行定義時(shí)，會(huì)觸發(fā)怪異模式。

在標(biāo)準(zhǔn)模式中，一個(gè)塊元素的總寬度= width + margin(左右) + padding(左右) + border(左右)

在怪異模式中，一個(gè)塊元素的總寬度= width + margin(左右)（即width已經(jīng)包含了padding和border值）

瀏覽器的兼容性問(wèn)題

一旦為頁(yè)面設(shè)置了恰當(dāng)?shù)?DTD，大多數(shù)瀏覽器都會(huì)按照上面的圖示來(lái)呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周?chē)?padding 和 border 值是另外計(jì)算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。

雖然有方法解決這個(gè)問(wèn)題。但是目前最好的解決方案是回避這個(gè)問(wèn)題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持 填充的寬度和邊框的寬度屬性設(shè)。

解決IE8及更早版本不兼容問(wèn)題可以在HTML頁(yè)面聲明 即可。