CSS盒模型：標準盒模型與怪異盒模型詳細介紹

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

盒子模型分為兩種：

第一種是W3C標準的盒子模型(標準盒模型)；

第二種是IE標準的盒子模型(怪異盒模型)；

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

1、標準盒模型中width指的是內容區(qū)域content的寬度;height指的是內容區(qū)域content的高度。

標準盒模型下盒子的大小 = content + border + padding + margin

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

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

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

content-box：默認值，border和padding不算到width范圍內，可以理解為是W3c的標準模型(default)。

總寬 = width + padding + border + margin

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

猜你喜歡

box-sizing的屬性及作用詳細介紹

css3結構偽類選擇器詳細介紹

css3畫三角形的方法

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