盒模型一二三（一）：盒世界，知幾何

學習 HTML 和 CSS 將近一個月，我覺得：層級（嵌套）關係和盒模型（Box Model）是理解和學習這兩門語言的基石，正如圖層概念是 Photoshop 的基礎。所以，充分理解盒模型有助於對於佈局的掌控。

以上是我在網上隨手截取一張盒模型的示意圖，能夠看出盒模型主要分爲四部分：內容（Content）、內邊距（Padding）、邊框（Border）和外邊距（Margin）。網絡上對盒模型有各類各樣的比喻，簡而言之，能夠將盒模型理解爲二維世界的盒子（正如其中文字面意思），內容=盒子盛放的東西，內邊距=盒內物品與盒壁的空隙，邊框=盒子四壁，外邊距=盒子與盒子之間的空隙。

這裏提一個不太相關的翻譯問題，因爲不少東西都是外來物（好比HTML），以英語爲主，所以在翻譯上會存在分歧。好比 Box Model 在 W3C 中文官網上翻譯爲「框模型」，也有人翻譯爲「盒子模型」；而對於 padding 和 margin 的翻譯也存在較大的差別，好比有人將其翻譯爲「填充」和「邊界」。如何翻譯，問題不大，可是一要選擇本身易於理解的；二要先後一致，如不能翻譯爲「填充「和」外邊距」，這樣就顯得不三不四了（就像在縮進時同時使用空格和Tab），時尚界能夠混搭，但前端開發依然屬於嚴謹規範的比特世界。另外，這也告誡咱們仍是要儘量多讀英文原版內容。

盒模型

迴歸盒模型的話題，圖片中的T、R、B、L分別表明Top、Right、Bottom、Left，好比TP=Top padding，能夠看出除content外，padding/border/margin都有上、右、下、左這四個屬性。記住上、右、下、左的順序也很重要，這牽涉到複合的問題。爲什麼是上、右、下、左的順序？由於外國人在指認方向時一般採用順時針的順序（如某物在你的9點鐘方向）。

盒模型的大小：
Box Width = LB + LP + Content Width + RP + RB
Box Height = TB + TP + Content Height + BP + BB

盒模型的經常使用屬性有：

1. 3個：padding/border/margin

2. 4個：top/right/bottom/left

3. 3個：color/style/width （radius/image 是 CSS3 新增屬性）

這些屬性大多能夠進行復合，如padding-top、border-left-width，可是有幾點須要注意：

1. padding 和 margin 只有 top/right/bottom/left 四個屬性。
   如 padding-top = the top width of padding，以上面所提盒子的比喻來理解，間隙原本就只是空間屬性而已。

2. 盒模型的屬性值一般成對出現。
   好比margin: 10px 表示上下左右都是10像素；塊元素居中的樣式margin: 0 auto，0 表示上下、auto表示左右；而margin: 0 auto 10px 表示上=0，左右=auto，下=10px。

3. 瀏覽器對塊元素的默認樣式問題：如 IE7 下塊元素的盒模型樣式：
   

4. 複合屬性寫法：
   若是咱們想給 div 添加樣式，能夠這樣寫：

div {
    border-width:5px;
    border-style: solid;
    border-color: red;
}

爲了精簡代碼，也能夠採用以下的複合屬性寫法：

div {
  border:5px solid red;
}