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

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

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

基本框

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

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

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

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

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

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

包含塊

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

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

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

不必?fù)?dān)心行內(nèi)元素，因?yàn)樗鼈兊臄[放方式并不直接依賴于包含塊。本章后面還會(huì)討論有關(guān)內(nèi)容。

快速復(fù)習(xí)

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

正常流

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

非替換元素

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

替換元素

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

塊級(jí)元素

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

行內(nèi)元素

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

根元素

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