在前面幾章中。我們針對CSS網(wǎng)頁設(shè)計如何處理文檔中的文本和字體介紹了很多實用知識。這一章中，我們將介紹視覺表現(xiàn)的一些理論方面，另外，前面為了強調(diào)CSS如何實現(xiàn)而跳過了一些問題，這些問題也將在這一章中回答。

為什么要用一整章來討論CSS中關(guān)于視覺顯示的這些理論基礎(chǔ)呢？答案是，CSS包含如此開放、如此強大的一個模型，對于這樣一個模型，可以有無數(shù)種方法結(jié)合應(yīng)用各種屬性，可以得到的效果也數(shù)不勝數(shù)，所以沒有哪本書能全面涵蓋每一種可能。你肯定還會發(fā)現(xiàn)新的方法來通過使用CSS得到你自己想要的文檔效果。

在研究CSS的過程中，你可能會發(fā)現(xiàn)用戶代理有一些看上去很奇怪的行為。如果全面地掌握了CSS網(wǎng)頁設(shè)計中視覺表現(xiàn)模型是如何工作的，你就能確定一種行為到底是CSS所定義表現(xiàn)引擎的正確結(jié)果（盡管出乎意料），還是一個需要報告的bug。

基本框

CSS假定每個元素都會生成一個或多個矩形框，這稱為元素框（規(guī)范的將來版本可能允許非矩形的框，不過對現(xiàn)在來說，框都是矩形的）。各元素框中心有一個內(nèi)容區(qū)（content area）。這個內(nèi)容區(qū)周圍有可選的內(nèi)邊距、邊框和外邊距。這些項之所以被認為是可選的，原因是它們的寬度可以設(shè)置為0，實際上這就從元素框去除了這些項，圖7-1 顯示了一個示例內(nèi)容區(qū)，這個內(nèi)容區(qū)的周圍還有內(nèi)邊距、邊框和外邊距。

圖7-1：內(nèi)容區(qū)及其外圍項

可以用多種屬性設(shè)置各外邊距，邊框和內(nèi)邊距，如margin-left或border-bottom。內(nèi)容的背景（例如某種顏色或平鋪圖像）也會應(yīng)用到內(nèi)邊距。外邊距通常是透明的，從中可以看到父元素的背景。內(nèi)邊距不能是負值，但是外邊距可以。本章后面將探討外邊距值為負時的效果。

邊框使用已定義樣式生成，如solid或inset，邊框的顏色使用border-color屬性設(shè)置。如果沒有設(shè)置顏色，那么邊框?qū)⑷≡貎?nèi)容的前景色。例如，如果一個段落的文本是白色，那么該段落的所有邊框都是白色，除非創(chuàng)作人員顯式地聲明了另外一種邊框色。如果邊框樣式有某種縫隙，則可以通過這些縫隙看到元素的背景。換句話說，邊框與內(nèi)容和內(nèi)邊距有相同的背景。最后要說明的是，邊框的寬度絕對不能為負。

注意：元素框的各個部分可能受很多屬性的影響，如width或border-right。其中很多屬性將在本章中用到，盡管目前我們還沒有討論過這些屬性。具體的屬性定義將在第8章給出，那時才會介紹有關(guān)的概念。

不過你會發(fā)現(xiàn)，對不同類型的元素格式化時存在著差別。塊級元素的處理就不同于行內(nèi)元素，而浮動元素和定位元素也分別有各自不同的表現(xiàn)。

包含塊

每個元素都相對于其包含塊擺放；可以這么說，包含塊就是一個元素的“布局上下文”。 網(wǎng)頁設(shè)計CSS2.1定義了一系列規(guī)則來確定元素的包含塊。這里介紹的只是其中的部分規(guī)則，這些規(guī)則的概念都將在本章加以明確，而其他規(guī)則將在后面的章節(jié)中介紹。

對于正常的西方語言文本流中的一個元素，包含塊由最近的塊級祖先框、表單元格或行內(nèi)塊祖先框的內(nèi)容邊界（content edge）構(gòu)成。

在這個非常簡單的例子中，p元素的包含塊是div元素，因為作為塊級元素、表單元格或行內(nèi)塊元素，這是最近的祖先元素（本例中是一個塊元素框）。類似地，div的包含塊是body。因此。p的布局依賴于div的布局，而div的布局則依賴于body的布局。

不必擔心行內(nèi)元素，因為它們的擺放方式并不直接依賴于包含塊。本章后面還會討論有關(guān)內(nèi)容。

快速復習

下面來快速地回顧一下我們討論的網(wǎng)頁設(shè)計中的各種元素，同時還將談到一些重要的術(shù)語，這些術(shù)語對于理解本章的概念很重要。

正常流

這是指西方語言文本從左向右、從上向下顯示，這也是我們熟悉的傳統(tǒng)HTML文檔的文本布局，注意，在非西方語言中，流方向可能不同。網(wǎng)頁設(shè)計中大多數(shù)元素都在正常流中，要讓一個元素不在正常流中，唯一的辦法就是使之成為浮動或定位元素（將在第10章介紹）。要記住，本章只討論正常流中的元素。

非替換元素

如果元素的內(nèi)容包含在文檔中，則稱之為非替換元素。例如，如果一個段落的文本內(nèi)容都放在該元素本身之內(nèi)，這個段落就是一個非替換元素。

替換元素

這是指用作為其他內(nèi)容占位符的一個元素。替換元素的一個經(jīng)典例子就是img元素，它只是指向一個圖像文件，這個文件將插入到文檔流中該img元素本身所在位置。大多數(shù)表單元素也可以替換（例如，<input type="radio">)。

塊級元素

這是指段落、標題或div之類的元素。這些元素在正常流中時，會在其框之前和之后生成“換行”，所以處干正常流中的塊級元素會垂直擺放。通過聲明display: block，可以讓元素生成塊級框。

行內(nèi)元素

這是指strong或span之類的元素，這些元素不會在之前或之后生成“行分隔符”，它們是塊級元素的后代。通過聲明display: inline?？梢宰屧厣梢粋€行內(nèi)框。

根元素

位于文檔樹頂端的元素。在HTML文檔中，這就是元素html在XML文檔中。則可以是該語言允許的任何元素。