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;}

說明：這條規則把所有元素默認的外邊距和內邊距都設定為零。把這條規則放到樣式表里后，所有默認的外邊距和內邊距都會消失。然后，你可以為那些真正需要外邊距的元素再添加外邊距。不同瀏覽器默認的內邊距和外邊距也不一樣，特別是對表單和列表等復合元素。在這種情況下，用這條規則 中和 默認值，然后再根據需要添加，則會在各瀏覽器上獲得一致的效果。
1.4 疊加外邊距

垂直方向上的外邊距會疊加，這可是你必須得知道的一件事。

    In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

在CSS中，兩個或多個毗鄰（父子元素或兄弟元素）的普通流中的塊元素垂直方向上的 margin 會發生疊加。這種方式形成的外邊距即可稱為外邊距疊加（collapsed margin）。
1.5 外邊距的單位

根據經驗，為文本元素設置外邊距時通常需要混合使用不同的單位。比如說，一個段落的左、右外邊距可以使用像素，以便該段文本始終與包含元素邊界保持固定間距，不受字號變大或變小的影響。而對于上、下外邊距，以 em 為單位則可以讓段間距隨字號變化而相應增大或縮小。

示例：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表