CSS 盒子模型 Box Model

CSS 盒子模型概述

• element : 元素。

• padding : 內邊距，也有資料將其翻譯爲填充。

• border : 邊框。

• margin : 外邊距，也有資料將其翻譯爲空白或空白邊。

盒子模型有兩種，分別是 IE 盒子模型和標準 W3C 盒子模型。 

盒子模型是CSS中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 IE 盒子模型和標準 W3C 盒子模型。他們對盒子模型的解釋各不相同，先來看看咱們熟悉的標準盒子模型

和上面看到的圖有些區別，這裏把各屬性支持也畫出來。

IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不一樣的是：IE 盒子模型的 content 部分包含了 border 和 pading。 

一、W3C的標準Box Model:

  /*外盒尺寸計算（元素空間尺寸）*/
  Element空間高度 = content height + padding + border + margin
  Element 空間寬度 = content width + padding + border + margin
  /*內盒尺寸計算（元素大小）*/
  Element Height = content height + padding + border （Height爲內容高度）
  Element Width = content width + padding + border （Width爲內容寬度）

 二、IE)傳統下Box Model（IE6如下，不含IE6版本或「QuirksMode下IE5.5+」）:

  /*外盒尺寸計算（元素空間尺寸）*/
  Element空間高度 = content Height + margin (Height包含了元素內容寬度，邊框寬度，內距寬度)
  Element空間寬度 = content Width + margin (Width包含了元素內容寬度、邊框寬度、內距寬度)
  /*內盒尺寸計算（元素大小）*/
  Element Height = content Height(Height包含了元素內容寬度，邊框寬度，內距寬度)
  Element Width = content Width(Width包含了元素內容寬度、邊框寬度、內距寬度)

具體舉例：
例：一個盒子的 margin 爲 20px，border 爲 1px，padding 爲 10px，content 的寬爲 200px、高爲 50px，

若是用標準 W3C 盒子模型解釋，那麼這個盒子須要佔據的位置爲：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2+10*2+50=112px，盒子的實際大小爲：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；

若是用IE 盒子模型，那麼這個盒子須要佔據的位置爲：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小爲：寬 200px、高 50px

那應該選擇哪中盒子模型呢？固然是「標準 W3C 盒子模型」了。怎麼樣纔算是選擇了「標準 W3C 盒子模型」呢？很簡單，就是在網頁的頂部加上 DOCTYPE 聲明。若是不加 DOCTYPE 聲明，那麼各個瀏覽器會根據本身的行爲去理解網頁，即 IE 瀏覽器會採用 IE 盒子模型去解釋你的盒子，而 FF 會採用標準 W3C 盒子模型解釋你的盒子，因此網頁在不一樣的瀏覽器中就顯示的不同了。反之，若是加上了 DOCTYPE 聲明，那麼全部瀏覽器都會採用標準 W3C 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框之外是外邊距，外邊距默認是透明的，所以不會遮擋其後的任何元素。

提示：背景應用於由內容和內邊距、邊框組成的區域。

內邊距、邊框和外邊距都是可選的，默認值是零。可是，許多元素將由用戶代理樣式表設置外邊距和內邊距。能夠經過將元素的 margin 和 padding 設置爲零來覆蓋這些瀏覽器樣式。這能夠分別進行，也可使用通用選擇器對全部元素進行設置：

* {
  margin: 0;
  padding: 0;
}

在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增長內邊距、邊框和外邊距不會影響內容區域的尺寸，可是會增長元素框的總尺寸。

假設框的每一個邊上有 10 個像素的外邊距和 5 個像素的內邊距。若是但願這個元素框達到 100 個像素，就須要將內容的寬度設置爲 70 像素，請看下圖：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示：內邊距、邊框和外邊距能夠應用於一個元素的全部邊，也能夠應用於單獨的邊。

提示：外邊距能夠是負值，並且在不少狀況下都要使用負值的外邊距。

參考地址：http://www.w3school.com.cn/css/css_boxmodel.asp