CSS-標準盒模型 & 怪異盒模型

CSS中Box model分類

CSS中Box model是分為兩種:: W3C標準 和 IE標準盒子模型。

大多數瀏覽器採用W3C標準模型，而IE中則採用Microsoft自己的標準。

怪異模式是“部分瀏覽器在支援W3C標準的同時還保留了原來的解析模式”，怪異模式主要表現在IE核心的瀏覽器。

當不對doctype進行定義時，會觸發怪異模式。

在標準模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)

在怪異模式下，一個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）

CSS3的box-sizing

box-sizing文法：

box-sizing ： content-box || border-box || inherit;

當設定為box-sizing:content-box時，將採用標準模式解析計算，也是預設模式；

當設定為box-sizing:border-box時，將採用怪異模式解析計算；