盒子模型是CSS中一個重要的概念伪冰，理解了盒子模型才能更好的排版和布局樟蠕。盒子模型有兩種靠柑，分別是 IE 盒子模型和標準 W3C 盒子模型吓懈。
盒模型的結構
1.content(內(nèi)容):用來展示文字和圖片
2.padding(內(nèi)邊距):內(nèi)容與邊框的距離
3.border(邊框):元素的邊框
4.margin(外邊距):元素與元素之間的距離(父子元素,兄弟元素)
標準盒子模型：
包括margin、border耻警、padding、content腮恩，并且 content 部分不包含其他部分温兼。
也就是標準盒模型的寬度就是內(nèi)容的寬度。
IE 盒子模型：
包括 margin募判、border、padding内颗、content敦腔，和標準盒子模型不同的是IE 盒子模型的 content 部分包含了 border 和 pading。
舉個栗子：
一個盒子的 margin 為 20px符衔，border 為 5px，padding 為 10px躺盛，content 的寬為 200px形帮，如果用標準 盒子模型解釋，那么這個盒子需要占據(jù)的位置為：寬 20*2 +5*2+10*2+200=270px辩撑，盒子的實際寬度為：5*2+10*2+200=230px；如果用IE盒子模型各薇，那么這個盒子需要占據(jù)的位置為：寬 20*2+200=240px君躺，盒子的實際寬度依然是： 200px峭判。
CSS3中有個屬性:box-sizing开缎，能改變盒子的模型標準:
border-box（IE盒模型 )
content-box（W3C盒模型）
怪異盒子模型
怪異模式是“部分瀏覽器在支持W3C標準的同時還保留了原來的解析模式”，怪異模式主要表現(xiàn)在IE內(nèi)核的瀏覽器奕删。
當不對doctype進行定義時疗认，會觸發(fā)怪異模式。
在標準模式中侮邀，一個塊元素的總寬度= width + margin(左右) + padding(左右) + border(左右)
在怪異模式中，一個塊元素的總寬度= width + margin(左右)（即width已經(jīng)包含了padding和border值）
瀏覽器的兼容性問題
一旦為頁面設置了恰當?shù)?DTD铝宵，大多數(shù)瀏覽器都會按照上面的圖示來呈現(xiàn)內(nèi)容华畏。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范侣夷，元素內(nèi)容占據(jù)的空間是由 width 屬性設置的仑乌，而內(nèi)容周圍的 padding 和 border 值是另外計算的。不幸的是晰甚，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度厕九，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和扁远。
雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題并闲。也就是皮获，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素洒宝。
IE8 及更早IE版本不支持 填充的寬度和邊框的寬度屬性設。
解決IE8及更早版本不兼容問題可以在HTML頁面聲明 即可宏浩。
