3.3 可視化盒子模型

盒子模型是關于CSS控制頁面的一個重要概念。只有很好地掌握了盒子模型及其中每個元素的用法，才能真正地控制頁面中各個元素的位置。

3.3.1 盒子模型

頁面中所有的元素都可以看作一個盒子，都占據著一定的頁面空間。一般來說，這些被占據的空間往往都比單純的內容要大。換句話說，可以通過整個盒子的邊框和距離等參數，來調節盒子的位置。

盒子模型是由content（內容）、border（邊框）、padding（填充）和margin（邊界）4部分組成的，如圖3-12所示。

邊界、填充和邊框都分為“上、右、下、左”4個方向，既可以分別定義，也可以統一定義，代碼如下：

CSS內定義的寬（width）、高（height），指的是填充的內容范圍，因此一個元素實際寬度=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。代碼如下：

則實際寬度如圖3-13所示。

提示

關于盒子模型還有以下幾點需要注意：

（1）邊框默認的樣式（border-style）可設置為不顯示（none）。

（2）填充值不可為負。

（3）內聯元素，如a，定義上、下邊界不會影響到行高。

（4）如果盒子中沒有內容，則即使定義了寬度和高度都為100%，實際上還是為0，因此不會被顯示，此處在采取Div+CSS布局的時候需要特別注意。

3.3.2 視覺可視化模型

p、h1、div等元素被稱為塊級元素，因為這些元素顯示為一塊內容，即“塊級框”。與之相反，strong和span等元素被稱為行內元素，因為它們的內容顯示在行中，即“行內框”。

可以使用display屬性改變生成的框的類型，將display屬性設置為block，可以讓行內元素表現得像塊級元素一樣；將display屬性設置為none，可以讓生成的元素沒有框，此時，這個框及其所有內容就不顯示，不占用文檔中的空間。

CSS中有3種基本的定位機制：普通文檔流定位、浮動定位和絕對定位。除非專門指定，否則所有框都在普通文檔流中定位。

塊級框從上到下一個接一個排列；框之間的垂直距離可以根據框的垂直空白邊寬度計算出來。

行內框在一行中的水平位置，可以使用水平方向的填充、邊框和空白邊設置它們之間的水平間距。但是，垂直方向的填充、邊框和空白邊不影響行內框的高度。由一行形成的水平框稱為行框，行框的高度總是足以容納它包含的所有行內框，可以通過設置行高增加這個框的高度。

框可以按照HTML的嵌套方式包含其他的框。大多數框由顯示定義的元素形成。但是，在一些情況下，即使沒有進行顯示定義，也會創建塊級元素。這種情況發生在將一些文本添加到一些塊級元素（如div）的開頭時。即使沒有把這些文本定義為段落，它也會被當作段落對待：

在這種情況下，這個框被稱為無名塊級框，因為它不與專門定義的元素相關聯。

塊級元素內的文本行也會發生類似的情況。假設有一個包含三行文本的段落，每行文本形成一個無名行框，則無法直接對無名框或行框應用樣式，因為沒有可以應用樣式的地方。但是，這有助于用戶理解在屏幕上看到的所有東西都形成某種框。

3.3.3 空白邊疊加

空白邊疊加是一個比較簡單的概念，當兩個垂直空白邊相遇時，它們將形成一個空白邊。這個空白邊的高度是兩個發生疊加的空白邊中高度較大者的高度。

當一個元素出現在另一個元素上面時，第一個元素的底空白邊與第二個元素的頂空白邊發生疊加，兩個元素的CSS代碼如下：

兩個元素的空白邊疊加效果如圖3-14所示。

當一個元素包含在另一元素中時（假設沒有填充或邊框將空白邊隔開），它們的頂空白邊和底空白邊也會發生疊加。

提示

只有普通文檔流中塊級框的垂直空白邊才會發生空白邊疊加。行內框、浮動框和絕對定位框之間的空白邊是不會疊加的。