CSS盒模型：標(biāo)準(zhǔn)盒模型與怪異盒模型詳細(xì)介紹

盒子模型(Box Modle)可以用來對元素進(jìn)行布局，包括內(nèi)邊距、邊框、外邊距和實(shí)際內(nèi)容這幾個(gè)部分。

盒子模型分為兩種：

第一種是W3C標(biāo)準(zhǔn)的盒子模型(標(biāo)準(zhǔn)盒模型)；

第二種是IE標(biāo)準(zhǔn)的盒子模型(怪異盒模型)；

標(biāo)準(zhǔn)盒模型與怪異盒模型的表現(xiàn)效果的區(qū)別之處：

1、標(biāo)準(zhǔn)盒模型中width指的是內(nèi)容區(qū)域content的寬度;height指的是內(nèi)容區(qū)域content的高度。

標(biāo)準(zhǔn)盒模型下盒子的大小 = content + border + padding + margin

2、怪異盒模型中的width指的是內(nèi)容、邊框、內(nèi)邊距總的寬度(content + border + padding)；height指的是內(nèi)容、邊框、內(nèi)邊距總的高度。

怪異盒模型下盒子的大小 = width(content + border + padding) + margin

除此之外，我們還可以通過屬性box-sizing來設(shè)置盒子模型的解析模式可以為box-sizing賦兩個(gè)值：

content-box：默認(rèn)值，border和padding不算到width范圍內(nèi)，可以理解為是W3c的標(biāo)準(zhǔn)模型(default)。

總寬 = width + padding + border + margin

border-box：border和padding劃歸到 width 范圍內(nèi)，可以理解為是IE的怪異盒模型，總寬=width+margin。

猜你喜歡

box-sizing的屬性及作用詳細(xì)介紹

css3結(jié)構(gòu)偽類選擇器詳細(xì)介紹

css3畫三角形的方法

黑馬程序員HTML&JS+前端課程