CSS中Box model分類

CSS中Box model是分為兩種:: W3C標(biāo)準(zhǔn) 和 IE標(biāo)準(zhǔn)盒子模型。

大多數(shù)瀏覽器采用W3C標(biāo)準(zhǔn)模型，而IE中則采用Microsoft自己的標(biāo)準(zhǔn)。

怪異模式是“部分瀏覽器在支持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值）

CSS3的box-sizing

box-sizing語(yǔ)法：

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

當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用標(biāo)準(zhǔn)模式解析計(jì)算，也是默認(rèn)模式；

當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用怪異模式解析計(jì)算；