CSS中的盒子模型(Box model)分為兩種:W3C標(biāo)準(zhǔn)盒子模型和IE標(biāo)準(zhǔn)盒子模型。
大多數(shù)的瀏覽器都采用W3C標(biāo)準(zhǔn)呛占,而IE采用的是IE標(biāo)準(zhǔn)。而怪異模式是指“部分瀏覽器在支持W3C標(biāo)準(zhǔn)的同時(shí)還保留了原先的解析模式”,怪異模式主要表現(xiàn)在IE內(nèi)核的瀏覽器中肴茄。
通過(guò)對(duì)比來(lái)分析標(biāo)準(zhǔn)模式和怪異模式對(duì)于塊大小的定義
標(biāo)準(zhǔn)模式下,一個(gè)塊的寬度 = width+padding(內(nèi)邊距)+border(邊框)+margin(外邊距)但指;
怪異模式下寡痰,一個(gè)塊的寬度 = width+margin(外邊距) (即怪異模式下,width包含了border以及padding);
image.png
image.png
CSS3 box-sizing
box-sizing:content-box||border-box||inherit
box-sizing:content-box; 將采用標(biāo)準(zhǔn)模式的盒子模型標(biāo)準(zhǔn)
box-sizing:border-box; 將采用怪異模式的盒子模型標(biāo)準(zhǔn)
box-sizing:inherit; 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值棋凳。