CSS盒子(框)模型

    我們知道一個網頁就是一個 html 文檔，文檔是由許多的 html 標籤 (元素)組成，使用 CSS 處理網頁的時候認爲每一個元素都是一個盒子(框)，所以只要在合適的位置擺放合適的盒子就可以實現對網頁的佈局，基本的實現方法就是大盒套小盒。盒子模型是 CSS 中最重要的概念。

盒子(框)模型

首先我們要知道什麼是盒子模型以及盒子模型的幾個重要的概念，如下圖如所示：

盒子由四個部分組成：元素（內容）部分（element）、內邊距(padding)、邊框（border）、外邊距（margin）。這幾個概念沒有什麼好說的，就是上圖所展示的各個部分。但是要想很好的使用還是不太容易。

內邊距

盒子的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。

padding 屬性

CSS padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值，但不允許使用負值。
由於我們有四個內邊距，我們可以使用四個屬性分別設置四個方向(上、右、下、左)的內邊距：
padding-top 、padding-right 、padding-bottom 、padding-left。

註釋:內邊距會影響整個盒子的大小，雖然內容區的大小不會改變，但是整個盒子的外觀會變大。
所以整個盒子的大小就是由 元素內容 、內邊距、邊框 決定，爲三者之和。

簡寫屬性

我們可以在屬性 padding 中同時爲四個方向設置內邊距。四個值的順序爲上、右、下、左：

h1 {padding: 10px 5px 20px 15px}

上面的例子，我們就爲 h1 設置分別爲 上、右、下、左四個邊的內邊距分別爲 10px、5px、20px、15px 大小。

邊框

border 屬性

元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。
border 屬性允許你規定元素邊框的樣式、寬度和顏色。

邊框的樣式

border style 屬性：

border-style:dotted solid double dashed;

分別表示的是: 點線、實線、雙線 以及 虛線。

邊框的寬度

border width 屬性：
爲邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em；或者使用 3 個關鍵字之一，它們分別是 thin 、medium（默認值） 和 thick。其中 thin 、medium 和 thick 三個關鍵字在不同的瀏覽器中代表的像素值大小不確定，可能分別是 5px、3px 、2px，也可能是 3px、3px 、1px，所以最好不要輕易使用這三個關鍵字。

同理，除了 border-width 屬性外，我們還可以分別指定四個方向邊框的寬度，使用的是下面四個屬性：
border-top-width 、 border-right-width 、border-bottom-width 、border-left-width。

邊框的顏色

border-color 屬性：
該屬性可以使用任意的顏色值：可以是顏色名，也可以是十六進制數以及 RGB 值：

border-color: red rgb(0,245,255) #bbffaa yellow;

上面的標記就是爲邊框的四個方向定義顏色 ：上、右、下、左的顏色分別就是 red 、rgb(0,245,255) 、#bbffaa 、yellow。

同理，除了 border-color 屬性外，我們還可以分別爲四個方向指定邊框的顏色：分別是下面的四個屬性：
border-top-color 、 border-right-color 、border-bottom-color 、border-left-color。

簡寫屬性

我們通常不會寫得這麼麻煩，如無特殊要求，我們只要使用簡寫屬性即可，border 屬性就可以一次性的設置這三個內容,比如：

h1 {border: 1px solid #000}

這裏我們同時爲 h1 元素的四個邊框進行設置，寬度是:1px，樣式是:solid,邊框顏色是黑色:#000。

外邊距

margin 屬性

外邊距指的是圍繞在元素邊框的空白區域。設置外邊距會在元素外創建額外的“空白”。
設置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。
margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em。
例如,下面即爲 h1 的各個邊上設置爲 1 個英寸的空白：

h1 {margin: 1in;}

下面的這個例子爲 h1 的四個邊分別設置不同的外邊距：

h1 {margin: 1px 2px 3px 4px;}

和內邊距以及邊框的設置一樣，遵循順時針的順序：上、右、下、左。

同理，除了 margin 屬性外，我們還可以分別爲四個方向的邊框，分別是下面四個屬性：
margin-top 、 margin-right 、margin-bottom 、margin-left。
例如下面的一個例子：

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

就等價於下面的聲明：

h2 {margin: 20px 30px 30px 20px}

顯然這種情況下使用簡寫屬性更加簡單一點。
當然，除了我們可以給 margin 四個值外，我們還可以使用 值複製 方法給 2 個或者 3 個值，下面詳細講解值複製。

值複製

• 使用正常的四個值，依次是上、右、下、左：

h1 {margin: 1px 10px 1px 10px;}

• 使用三個值，三個值依次代表的是：上、左右、下：

h1 {1px 5px 3px;} //等價於 h1 {1px 5px 3px 5px;}

• 使用兩個值，則這兩個值依次代表的是：上下、左右：

h1 {margin:1px 10px;} //等價於 h1 {1px 10px 10px 1px;}

{% note warning %}
註釋: margin 可以指定負值，其意義也很好理解。

margin 值還可以爲 auto給水平方負值，如果只給一邊設置 auto，則是在瀏覽器中顯示爲最大值，比如是 margin-left 和 margin-right;特別的 margin: 0 auto 表示元素在父元素水平居中。

{% endnote %}

外邊距合併問題

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。

合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

特別需要注意的是即使是一個元素包含在父元素之內，也會發生外邊距重疊的問題(這是一個非常隱蔽的問題，解決的方法也比較多),請看下圖：

解決這一問題的方法也很簡單，只需要讓子元素和父元素的外邊距不相鄰即可：
例如我們可以在子元素和父元素之間加上某一個元素隔開即可。

小結：

盒子模型是 css 最重要的概念，在寫 css 樣式的時候，要做到心中有丘壑。我們這裏主要講了盒子最重要的三個概念：

1. 內邊距( padding 屬性 ):
   分別爲四個邊設置內邊距：padding-top 、padding-right 、padding-bottom 、padding-left;

2. 邊框( border 屬性 ):
   分別設置四個邊的邊框：border-top 、border-right 、border-bottom 、border-left。其中每一個邊又具有三個屬性border-width 、 border-style 、 border-color;

3. 外邊距( margin 屬性):
   分別設置四個邊的外邊距：margin-top 、 margin-right 、margin-bottom 、margin-left。

4. 簡寫屬性：
   除了爲每一個方向設置內邊距、邊框以及外邊距，如無特別的需求，我們可以同時爲四個邊同時設置上述三個屬性，分別是：padding 、border和 margin

---

參考：

[1] W3School CSS教程