css盒模型(標準盒模型 怪異盒模型)

css盒模型(標準盒模型 怪異盒模型)

CSS 盒子模型(Box Model)
每個HTML元素都可以看作是一個盒子，父元素和子元素的關係就行大盒子裏放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括：外邊距（margin）、邊框（border）、內邊距（padding）、實際內容（content）四個屬性。

由於目前大部分主流的瀏覽器支持的是W3C標準盒模型（標準盒模型），也有保留對怪異盒子樣式的解析，當然IE沿用的是自己標準的盒模型（怪異盒子模型）

用兩個簡單的例子分別介紹下這兩個盒子模型：

標準盒模型：


這裏外層盒子的width和height都是：10 + 150 + 10 = 170px。

怪異盒模型:


這裏外層盒子的width和height都是：10 + 130+ 10 = 150px。

這裏得出一個結論：
標準盒模型，一個塊的總寬度 = width（content的寬度） + margin（左右）+ padding（左右）+ border（左右）

怪異盒模型，一個塊的總寬度 = width（content + border + padding）+ margin(左右)

據上面實驗也看到了,如果不想因爲改變padding的時候盒子的大小也會跟着變化的話就可以使用怪異盒模型,而如果想讓盒子的大小被padding撐開的話就可以使用標準盒模型