網(wǎng)頁(yè)設計中除了塊級元素，最常見(jiàn)的就是行內元素了。通過(guò)為行內元素設置框屬性，可以進(jìn)入到一個(gè)更有意思的領(lǐng)域（迄今為止，本書(shū)還沒(méi)涉入過(guò)這個(gè)領(lǐng)域）。行內元素有一些很好的例子，如em標志和a標志，這兩個(gè)標志都是非替換元素，另外圖像也屬于行內元素，不過(guò)圖像是替換元素。

警告：本節介紹的所有行為都不適用于表元素。網(wǎng)頁(yè)建設中CSS2對于表和表內容的處理引入了一些新的屬性和行為，表元素的表現與塊級元素或行內元素大相徑庭。表樣式將在第11章討論。

非替換元素和替換元素在內聯(lián)內容方面的處理稍有不同，討論行內元素的構造時(shí)我們將分別進(jìn)行討論。

行布局

首先，需要理解內聯(lián)內容如何布局。網(wǎng)頁(yè)設計中對于行內元素來(lái)說(shuō)，這沒(méi)有塊級元素那么簡(jiǎn)單和直接，塊級元素只是生成框，通常不允許其他內容與這些框并存。下面做個(gè)對照，來(lái)看一個(gè)塊級元素的內部（如一個(gè)段落）。你可能會(huì )問(wèn)：“所有文本行是怎么放在這里的？是誰(shuí)在控制它們的擺放？我能做些什么？”

為了理解如何生成行，首先來(lái)考慮這樣一種情況，一個(gè)元素包含一個(gè)很長(cháng)的文本行，如圖7-27所示。注意，這里將整行包圍在一個(gè)span元素中，從而為這一行加了一個(gè)邊框，然后為之指定邊框樣式：

span {border:1px dashed black;}

圖7-27顯示了行內元素包含在一個(gè)塊級元素中的最簡(jiǎn)單的情況。就其本身來(lái)說(shuō)，這與包含兩個(gè)詞的段落沒(méi)有什么區別。唯一的區別是，圖7-27中有幾十個(gè)詞，而大多數段落不會(huì )包含諸如span之類(lèi)的顯式行內元素。

如果不是這種最簡(jiǎn)單的狀況，來(lái)看我們更熟悉的情況，你所要做的只是確定元素應當有多寬，然后斷行，使斷開(kāi)的各部分能適應元素的寬度剛好放下。

什么都沒(méi)變。你所做的只是將一行分成多個(gè)部分，然后把這些部分一個(gè)挨一個(gè)地堆放。

每個(gè)文本行的邊框剛好與各行的頂端和底端吻合。這是因為沒(méi)有為行內文本設置內邊距或外邊距。注意，實(shí)際上邊框彼此稍有些重疊，例如，第一行的下邊框就在下一行上邊框的下面。這是因為邊框實(shí)際上畫(huà)在各行之外的下一個(gè)像素上（假設你使用的是顯示器由于各行緊挨著(zhù)，所以其邊框會(huì )重疊。

網(wǎng)頁(yè)設計中如果改變span樣式，使之有一個(gè)背景色，這些行的具體擺放就很清楚了。下面來(lái)看圖7-29，其中包含4個(gè)段落，每個(gè)段落有不同的text-align值，而且每個(gè)段落的文本行都有背景。

可以看到，網(wǎng)頁(yè)設計中并不是每一行都達到其父段落內容區的邊界，父段落內容區用一個(gè)灰色虛線(xiàn)邊框指示。對于左對齊的段落，行都壓到段落內容區的左邊對齊，各行在換行處結束。右對齊的段落則恰好相反。居中段落中，文本行的中心與段落的中心對齊。在最后一種情況下，即text-align的值為justify，各行必須與段落的內容區寬度相等，所以行邊界要達到段落的內容邊界。要調整各行中字母和字之間的間隔來(lái)彌補行實(shí)際長(cháng)度與段落寬度之間的差距。因此，文本兩端對齊時(shí)word-spacing的值可能被覆蓋（如果letter-spacing是一個(gè)長(cháng)度值，這個(gè)值則不能被覆蓋）。

這就很好地說(shuō)明了這些最簡(jiǎn)單的情況下文本行是如何生成的。不過(guò)，后面將會(huì )看到，行內格式化模型遠沒(méi)有這么簡(jiǎn)單。