1.盒模型

盒模型，就是 瀏覽器為頁面中的每個 HTML 元素生成的矩形盒子。

這些盒子們都要按照 可見版式模型（visual formatting model）在頁面上排布。可見的頁面版式主要由三個屬性控制： position 屬性、 display 屬性和 float 屬性。其中，position 屬性控制頁面上元素間的位置關系， display 屬性控制元素是堆疊、并排，還是根本不在頁面上出現， float 屬性提供控制的方式，以便把元素組成成多欄布局。

盒子屬性分三組：

    邊框（border）。可以設置邊框的寬窄、樣式和顏色。
    內邊距（padding）。可以設置盒子內容區與邊框的間距。
    外邊距（margin）。可以設置盒子與相鄰元素的間距。

    可以這么理解盒子屬性：外邊距是邊框向 外推 其他元素，而內邊距是從邊框向 內推 元素的內容。

CSS 為邊框、內邊距和外邊距分別規定了簡寫屬性。在每個簡寫聲明中，屬性值的順序都是上、右、下、左（順時針旋轉）。
示例：margin:5px 10px 12px 8px;

    注意：4 個值之間有空格，但不能是其他分隔符（比如逗號之類的）。甚至，你都不用把 4 值
    全都寫出來——如果哪個值沒有寫，那就使用對邊的值。

示例：margin:12px 10px 6px;
說明：缺少最后一個值（左邊），使用對邊（右邊）的值（10px），即：margin:12px 10px 6px 10px。

示例：margin:12px 10px;
說明：缺少最后兩個值（下邊和左邊），使用上邊（12px）和右邊（10px），即：margin:12px 10px 12px 10px;

示例：margin:12px;
說明：只寫一個值，那么4個邊都去這個值。即：margin:12px 12px 12px 12px;
1.1 盒子邊框

邊框（border）有3個相關屬性：

    寬度
    可以使用 thin、medium 和 thick 等文本值，也可以使用
    除百分比和負值之外的任何絕對值。

    樣式
    有 none、hidden、 dotted、 dashed、 solid、 double、 groove、
    ridge、 inset 和 outset 等文本值。

    顏色
    可以使用任意顏色值，包括 RGB、 HSL、十六進制顏色 值和顏色關鍵字。

1.2 盒子內邊距

內邊距（padding）用來設置盒子內容區與邊框的間距。在沒有設定內邊距的情況下，內容會緊挨著邊框。
1.3 盒子外邊距

外邊距（margin）用來設置盒子與相鄰元素的間距。

    推薦使用這條規則作為樣式表的第一條規則：* {margin:0; padding:0;}