盒子模型 主要有兩種，w3c標準盒模型，ie下的怪異盒模型，其實還有就是彈性盒模型(上篇文章我們用他很好的解決了對齊問題)
盒模型分為：標準w3c盒模型、ie盒模型、以及css中的伸縮盒模型
當我們使用編輯器建立乙個html頁面時，我們一定會發現最頂上的doctype標籤
這些doctype都是標準的文件型別，無論我們使用哪種模式都會觸發標準模式，而如果doctype缺失，則在ie6、ie7、ie8將會觸發怪異模式(quirks);一旦為頁面設定了恰當的
dtd(文件定義型別),大多數瀏覽器都會按照標準盒模型來呈現內容，但是ie5和ie6的呈現卻是不正確的.
根據w3c規範，元素內容佔據空間是由width屬性設定的，而內容周圍的padding和border都是另外計算的。
不幸的是，ie5.x 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
舉個栗子
我們用乙個div塊來演示標準模式和怪異模式的區別：
.box在怪異模式下的盒模型如下圖所示，盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的
盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;
也即是說width = 內容區寬度 + padding + border
語法：
box-sizing : content-box || border-box || inherit;參考標準模式，怪異盒模型&box-sizing屬性
w3c盒模型瀏覽器相容性
標準盒模型和怪異盒模型
ie盒模型 怪異盒模型 和標準盒模型的區別就是，ie盒模型中width和height除了content區域外，還包含padding和border。盒子的總寬度為乙個塊的總寬度 width margin 左右 即width已經包含了padding和border值 在標準盒模型下，width和heigh...
標準盒模型和怪異盒模型
盒子模型眾所周知，這裡先簡單介紹一下。可以看到，在標準盒模型 box sizing content box 下，width和height是內容區域即content的width和height。而盒子總寬度為 在標準模式下，乙個塊的總寬度 width margin 左右 padding 左右 borde...
標準盒模型和怪異盒模型
盒模型的組成，由內而外只要由 content，padding，border和margin組成。標準盒模型和怪異盒模型的主要區別就是所包含的內容。標準盒模型的內容就是content的大小 怪異盒模型的內容是content padding border 怪異盒模型的寬 content的寬 padding...