CSS 盒模型和怪異盒模型

盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係,css定義所有元素都可以擁有像盒子一樣的外形和平面空間,即都包含內容區,補白(填充,內邊距),邊框,邊界(外邊距)

下面說明了盒子模型:

盒模型又分為標準盒模型(w3c標準)和怪異盒模型(ie盒模型)

標準盒模型與ie盒模型的區別在於寬高的計算方式不同

1.標準盒模型

在標準模式下,乙個塊的寬度和高度計算如下

總寬度:width+margin(左右)+padding(左右)+border(左右)

總高度:height+margin(上下)+padding(上下)+border(上下)

2.ie盒模型

ie盒模型或怪異盒模型它的寬度和高度的計算方式是會包含padding和border的,計算方式如下

總寬度:width(包含了padding和border的值)+margin(左右)

總高度:height(包含了padding和border的值)+margin(上下)

3.區別

寬高計算方式不一樣,標準盒模型計算元素的寬高只計算content的寬高,ie盒模型是content+padding+border的中寬高

4.示例

.box
"box">

上述**是乙個盒子:content寬高100px,100px,padding為10px,border為5px,margin為10px標準盒模型下,這個元素的寬為100px,高為100px

ie盒模型下,寬為100px+2*10px(左右padding)+2*5px(左右border)=130px,高為100px+2*10px(上下padding),+2*5px(上下border)=130px

5.設定盒模型方法

box-sizing的預設值是content-box ,也就是預設標準盒模型

我們編寫頁面**時,應盡量使用標準的w3c模型(需在頁面中宣告doctype型別),這樣可以避免多個瀏覽器對同一頁面不相容

如果不宣告doctype型別,ie瀏覽器會將盒模型解釋為ie盒模型,firefix等會將其解釋為w3c盒子模型,若在頁面中宣告了doctype型別,所有的瀏覽器都會把盒模型解釋為w3c盒模型.

一般呢,我們使用過程中,都會傾向使用怪異盒模型,因為避免的一些高度或者寬度的計算,特別是在移動端適配的時候,會對自適應布局比較友好

//寫在css 重置中,全域性使用怪異盒模型

*