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

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

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

基本框

CSS假定每個(gè)元素都會(huì )生成一個(gè)或多個(gè)矩形框，這稱(chēng)為元素框（規范的將來(lái)版本可能允許非矩形的框，不過(guò)對現在來(lái)說(shuō)，框都是矩形的）。各元素框中心有一個(gè)內容區（content area）。這個(gè)內容區周?chē)锌蛇x的內邊距、邊框和外邊距。這些項之所以被認為是可選的，原因是它們的寬度可以設置為0，實(shí)際上這就從元素框去除了這些項，圖7-1 顯示了一個(gè)示例內容區，這個(gè)內容區的周?chē)€有內邊距、邊框和外邊距。

圖7-1：內容區及其外圍項

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

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

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

不過(guò)你會(huì )發(fā)現，對不同類(lèi)型的元素格式化時(shí)存在著(zhù)差別。塊級元素的處理就不同于行內元素，而浮動(dòng)元素和定位元素也分別有各自不同的表現。

包含塊

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

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

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

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

快速復習

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

正常流

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

非替換元素

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

替換元素

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

塊級元素

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

行內元素

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

根元素

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