標準盒模型和 IE 盒模型

盒模型講解

我們今天只會提到標準盒模型，和 ie 盒模型，兩種盒模型模式講解。首先來看標準盒模型。

只要是盒模型都會有這四個屬性 margin, border, padding, content 這四個部分。也就是說乙個基本的盒模型由著四部分組成。樣子如下：

這裡要說明的是，為了體現出盒模型的層次感。這裡的 content 和 padding 用了

不痛的顏色（紅色，白色），正常來說，我發單獨設定 padding 的顏色。也就是說 padding 和 content 內容區的背景顏色是一致的。

盒模型，就像盒子一樣。也是 box 直譯過來的。這四部分合理的配合，能做出頁面布局。每個元素都可以看成乙個個盒子，並且每個元素在頁面中，給我們的直接感受，就是佔據螢幕的大小。但是標準模式盒模型，它是很「貪心「的，這個要從它的占地面積說起。

我們都知道標準模式的盒模型的寬高的計算公式

元素寬度 = borderleft + paddingleft + width + paddingright + borderright。

元素高度=bordertop+paddingtop+height+paddingbottom+borderbottom

這裡說到的元素寬度和高度，指的是實際佔據的寬高，而且在標準模式盒模型下，我們設定的width 和 height 指的是 content』（內容區）的寬高。並不是他的實際寬高。

like this：

css：

width: 100px; height: 100px; background: lime; padding: 10px;

border: 2px solid #f20;

}根據上面的公式：

div 的實際占地寬度為： 100+ 20 +4 = 124px; 通過我們上面的截圖，我們也能看出來是這樣的。

對於這種貪婪特性（盡可能向外擴張）。對於布局來說，可能有些同學已經習慣

了這種布局的方式，畢竟剛開始我們我們就是這麼學過來的。隨著**的積累，發現一些問題：我們先定製內容的大小，然後在修改 padding 和 border 導致的盒子的具體大小由這三部分決定。對於乙個盒模型來說變數太大。

大家想想開發商買地蓋房子。先是圈地，然後在塊土地裡面進行操作，蓋幾幢房子。綠化面積比，太陽高度角多大等等等。這樣的話，我們位置一旦分配好了。就不用我們管了。你只能在內部改造。不可動用外部的區域。更容易限定，更容易布局。土地交易局不管你，房屋多大（content），綠植面積（padding），柵

欄寬度（border）怎麼分配，你就告訴我，你要多大就完了。

對於這種情況，就涉及到 ie 盒模型，也有乙個尊稱叫「怪異盒模型」。對於 ie 盒模型他還是很傳統的，只在特定區域內去分配自己的空間。

舉個栗子：『

**：

box-sizing: border-box; width:
100px;
height:
100px; padding:
20px; border:
10px; margin:
20px; background: red;
}

我們看到的這個盒模型就是 ie 盒模型，給定寬度 100 邊框 10 內邊距 20 自己所剩下的寬度為：

100 – 10 -20 -20 -10= 40；

這裡面我們看到除了外邊框，以及內邊距剩下的區域才是 content 的區域。在這裡面涉及到乙個新的屬性 box-sizing.。用於設定盒模型的模式。

box-sizing 存在兩個屬性值

content-box 預設值，也就是標準模式盒模型。

border-box，設定為 ie 模式盒模型。

border-box 的優勢：

border-box 的誕生，主要就是解決 content-box 的最大缺點。border-box 意味著子容器的 padding 和 border 的厚度都算在 50之內，這樣，你可以隨意的修改 padding 和 border 的厚度值，根本不用擔心父容器被撐爆。

border-box 是事實的標準？

現在最著名的 css 框架幾乎都採用了 border-box，所以它才是事實的標準。框架想要具備柵格系統，就肯定要去使用 border-box，如果用 content-box 會有一種想死的感覺。

接下來說說盒模型存在兩個經典 bug——margin 塌陷和合併

margin 塌陷：

父子巢狀元素在垂直方向的 margin,父子元素是結合在一起的,他們兩個的 margin

會取其中最大的值.

正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.

但由於 margin 的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級就像坍塌了一樣。

margin 塌陷的解決辦法

1.給父級設定邊框或內邊距(不建議使用)

2.觸發 bfc(塊級格式上下文),改變父級的渲染規則

方法:

改變父級的渲染規則有以下四種方法,給父級盒子新增

(1)position:absolute/fixed

(2)display:inline-block;

(3)float:left/right

(4)overflow:hidden

margin 合併

兩個兄弟結構的元素在垂直方向上的 margin 是合併的。

在 margin 合併這個問題上,我們一般不用 bfc,而是通過只設定上面的元素的

margin-bottom 來解決距離的問題。

標準盒模型和 IE 盒模型

標準盒模型和IE盒模型

標準盒模型和怪異（IE）盒模型

與標準盒模型和IE盒模型優點？

標準盒模型和 IE 盒模型

標準盒模型和IE盒模型

標準盒模型和怪異（IE）盒模型

與標準盒模型和IE盒模型優點？

相關推薦