盒子就是一個元素（標籤）的所轄範圍，簡單來說，基本就是一個“矩形區域”。
5.1 盒子概述
所謂盒子，就是將html網頁中的標籤在網頁版面中所佔據的平面範圍，抽象出來的一個“視覺形狀”。
一個最簡單的理解就是：幾乎所有標籤，都可以看做是一個“矩形盒子”，具有一定的寬高（區域）。
總體上來說，一個盒子，是由若干個部分構成的，從內到外依次包括：
盒子內容區，內邊距區，邊框，外邊距區
記住以下幾個單詞：
content：內容
padding：內邊距，又稱爲內補白，是一片空白區域
border：邊框
margin：外邊距，又稱爲外補白，也是一片空白區域
top，right，bottom，left：上，右，下，左
特別注意：
1，一般情況下，一個盒子中放置內容或其他元素（元素也是盒子），實際是放在內容區的。
2，平常我們看不到內邊距，邊框和外邊距，是因爲他們默認都是0（寬度，或厚度）。
5.2 盒子的寬高屬性 width和height
設置盒子的寬高屬性，實際上設置的是盒子內容區的寬高。比如：
div{ width: 100px; height: 100px; }
而盒子實際佔據的區域的寬高，可以這樣來計算：
盒子所佔寬：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
盒子所佔高：
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
除了這兩個基本寬高屬性，還有以下4個範圍限定性寬高屬性，有時候也會用一用：
min-width： 設定最小寬度
max-width： 設定最大寬度
min-height： 設定最小高度
max-height： 設定最大高度
5.3 邊框屬性border
邊框屬性就是設置一個盒子的邊框線的具體特性。
邊框線的特性有3個：
border-style：
線型，屬性值通常有：solid(實線)， dashed(虛線)， dotted(點線)
border-width：
線的粗細，長度單位，比如1px
border-color：
線的顏色，顏色值，比如red， rgb(255, 0, 0)， #FF3366
又由於一個盒子的邊框有4個方位(top, right, bottom, left)，則總體上就至少有12個邊框屬性，形式爲：
border-方位-特性，比如：
border-top-style， border-top-width，border-top-color， border-right-width， border-left-color，等等。
示例： border-top-style: solid; border-right-color: #FF0000; border-left-width: 2px;
實際上，還有若干個“單邊綜合屬性”，比如：
border-top：一次性設置上邊框線的特性；
border-left：一次性設置左邊框線的特性；
....
示例： border-top: 1px solid blue; border-right: 5px dotted green;
應用中，最常用的其實是“border”這一個最大的綜合屬性，它一次性設置4個邊的3個特性，比如：
border： 1px solid red; //表示4變的邊框線都是寬度爲1px的紅色實線。
5.4 內邊距屬性 padding
含義：內邊距是指在盒子結構中，盒子的邊框線和內容之間的一段空白區域（內容放不進去）。
我們能設置的就是這個空白區域的大小（寬度）。
同樣分4個方向，分別可以單獨設置：
padding-top：1px； //上內邊距
padding-right：2px； //右內邊距
padding-bottom：4px； //下內邊距
padding-left：8px； //左內邊距
還有一個綜合屬性：
padding：寬度1 [寬度2] [寬度3] [寬度4]； //這個用的最多，推薦使用。
這個綜合屬性可以設置1-4個值，不同個數的值，其含義不同，如下所示：
1個值： 表示4個方向都是這個值。
2個值： 第1個表示上下邊距的值，第2個表示左右邊距的值。
3個值： 第1個表示上邊距的值，第2個表示左右邊距的值，第3個表示下邊距的值。
4個值： 依次代表top， right， bottom， right這4個方向的內邊距的值。
記憶： 按給出值的個數，按順時針依次給上，右，下，左去“賦值”，沒有的，就找對面。
5.5 外邊距屬性 margin
含義：
外邊距是指在盒子結構中，盒子的邊框線，跟盒子的外部其他元素之間的一段空白區域。
我們能設置的就是這個空白區域的大小（寬度）。
它的屬性設置和含義，跟內邊距（padding）非常類似：
margin-top：1px； //上外邊距
margin-right：2px； //右外邊距
margin-bottom：4px； //下外邊距
margin-left：8px； //左外邊距
margin：寬度1 [寬度2] [ 寬度3] [寬度4]； //同時設置4個方向，用的最多，推薦使用。
外邊距的“重疊性”：
當兩個垂直方向的外邊距（即margin-top和margin-bottom）挨在一起的時候（就是垂直方向上相鄰），則這兩個外邊會“重疊在一起”，表現爲只有更大的那個外邊距的高度(本來“按理”是兩個相加的高度)。
情況1：
margin-bottom 和 margin-top 相鄰（挨着）
情況2：
兩個margin-top相鄰（此時其實是兩個嵌套的div）。（兩個margin-bottom道理一樣）
