4.4　一切都是盒子——盒子模型

請你做個裁判，看看圖4.10中的（a）和（b）兩個照片墻，哪個更好看？為什么？

（a）中的圖片是采用默認的img樣式，即橫向排列，而（b）則是通過CSS的盒模型，設計盒子之間的距離，實現照片之間留下空白，讓照片墻因距離而產生美。如果你也想制作屬于個性定制的照片墻，一定要學會如何使用盒子模型。

4.4.1　盒子模型的基本定義

圖4.11是引自W3C官網的標準盒子模型，我們先作簡單了解。

要知道，每一個可以包裹內容的元素都可以定義盒子模型，該模型可以想象成兩層盒子。以W3C的標準盒子模型為例（圖4.11），外層盒子的邊框是不可見的。因此，無法給最外層邊框定義樣式。而內層盒子的邊框是可見的，因此可以定義border樣式。關于盒子的邊距，則分為外邊距（margin）和內邊距（padding）。

關于width和height的“坑”

在給某個元素定義寬度（width）和高度（height）屬性時，是指盒子內部的內容（content）的寬度和高度，而不是盒子的實際值。盒子的實際高度和寬度的計算方式如下：

盒子寬度=border-left+padding-left+width+padding-right+border-right

盒子高度=border-top+padding-top+height+padding-bottom+border-bottom

即使是body元素的盒子，它默認的四個外邊距margin也是8個像素，所以body內部的內容并不是占據了整個頁面。如果你想讓頁面內容占據整個頁面且橫向居中顯示，就需要自定義一個樣式：

這里我們用兩個值的方式聲明了body元素的外邊距，其中第一個0表示上下邊距為0，第二個auto，表示自動計算剩余空間，保證左右間距平分剩余空間，所以效果就是左右居中對齊。使用該屬性，有一個要點，就是要配合width的定義，因為你沒有見到過哪個網頁是把寬度占滿屏幕的一整行，那樣很奇怪，而且對于超過1200px的屏幕寬度，用戶需要移動頭部才能看到完整內容，這是很不人性化的。另外，如果width沒有定義，則采用默認寬度為整個屏幕的寬度，那么auto值計算出來的剩余空間就為0，也看不出來居中對齊的效果。

一定要知道的技巧

margin：0 auto；這是一個非常有用的讓盒子元素自動居中的樣式聲明，一定要記住。大多數網站，一定會給諸如body，div等元素定義該屬性讓其內容左右自動居中。不過，它一定要配合width屬性使用，width的值要小于元素的默認值，切記。

還有一個值得注意的地方，當屬性涉及單位時，注意數值和單位之間不要有空格，比如：

4.4.2　盒子使用定理

盒子模型在元素的布局中十分重要，通過給盒子內的元素設置margin和padding屬性實現元素與邊框之間的間距，達到距離產生美的效果。關于這兩個屬性的用法可以參考以下使用技巧：

（1）margin用于定義兩個盒子之間的距離，又稱外邊距；

（2）padding用于盒子的內邊框和內容之間的間距，又稱內邊距；

（3）還可以單獨設定盒子上下左右的某一側間距，包裹margin-top（上外邊距），margin-bottom（下外邊距），margin-left（左外邊距），margin-right（右外邊距），padding-top（上內邊距），padding-bottom（上內邊距），padding-left（左內邊距），padding-right（右內邊距）；

（4）無論是外邊距還是內邊距，都有四種定義方式：

一般來說，外邊距的使用頻率比內邊距要高一些。

4.4.3　盒子在頁面布局中的兩種常見用法

盒子模型經常用于頁面中元素的布局，接下來介紹兩種盒子布局的用法：整體布局和內部布局。

1．整體布局

當我們在建設一個網站時，首先需要設計整體布局，比如一個網頁的布局為上（1）中（8）下（1）的三明治布局，或者上（1）左（1）右（4）的廠字型布局，這些布局都可以通過盒子模型來實現，下面來看一個典型的上中下布局，如圖4.12所示。

通過對布局的整體分析，得出如圖4.13所示的分解圖，于是我們可以采用三個不同的標簽將頁面劃分成三個不同的功能區域，主要HTML代碼如下：

對每一個區域可以定義不同的背景顏色和寬高，my.css中的樣式定義如下：

最后，呈現出的效果就是圖4.13。接下來再來看另一種常用的布局：內部布局。

2．內部布局

盒子元素還可以做細致的內部元素布局，如圖4.14所示。

圖4.14是一條評論內容，其中包括用戶頭像圖片、用戶名、評論內容、評論時間、點贊數量和回復等子內容。那么，要做到如圖4.14所示的布局，大致需要定義多少種樣式？思考1分鐘后，再參考一下圖4.15給出的一個可選方案（切記這只是可能方案之一，你還可以設計不同的方案）。

為什么要做這樣的分解？

在上面的布局中，可以看到很多個不同顏色邊框的盒子元素，看上去像是把一塊大盒子不斷做分解，折分成若干個小盒子。這樣做最大的好處是給不同的盒子添加個性化的樣式，也為了讓每一個盒子之間都有間距樣式的控制。這樣的場景非常常見，每一個網頁上都會有這種布局。這也是很多開發人員喜歡用div元素做布局的原因。

接下來，我們分別來看一下每個盒子的作用。

（1）最外層黑色盒子，是為了和其他類似的盒子產生距離，也為了控制整體盒子的大小。

（2）左側圖片區盒子，是為了方便地定義頭像圖片的樣式，也為了增加一些間距。

（3）右側內部的盒子很復雜，先從大的來說，有上中下區分，其中上方藍色盒子是用戶相關信息，中部是評論內容區，下方紫色盒子是評論時間、點贊和回復區。

（4）在右側下方紫色盒子內部，又可以分為三個小盒子：評論時間、點贊和回復。這樣拆分的原因是評論時間與點贊的字體顏色不一樣，因此采用分開的盒子更便于設置單獨的樣式。而點贊和回復最好也采用兩個不同的盒子，原因是點贊的圖片和回復前的圖標不一樣，各自用不同的盒子布局便于利用CSS中的圖片樣式加以區別。

最后，請參考圖4.16的實現代碼，自己做一遍。有不理解的樣式屬性也不要緊，此時，只需要了解如何用嵌套的div盒子做布局即可。