網(wǎng)頁設(shè)計(jì)中除了塊級(jí)元素，最常見的就是行內(nèi)元素了。通過為行內(nèi)元素設(shè)置框?qū)傩?，可以進(jìn)入到一個(gè)更有意思的領(lǐng)域（迄今為止，本書還沒涉入過這個(gè)領(lǐng)域）。行內(nèi)元素有一些很好的例子，如em標(biāo)志和a標(biāo)志，這兩個(gè)標(biāo)志都是非替換元素，另外圖像也屬于行內(nèi)元素，不過圖像是替換元素。
警告：本節(jié)介紹的所有行為都不適用于表元素。網(wǎng)頁建設(shè)中CSS2對(duì)于表和表內(nèi)容的處理引入了一些新的屬性和行為，表元素的表現(xiàn)與塊級(jí)元素或行內(nèi)元素大相徑庭。表樣式將在第11章討論。
非替換元素和替換元素在內(nèi)聯(lián)內(nèi)容方面的處理稍有不同，討論行內(nèi)元素的構(gòu)造時(shí)我們將分別進(jìn)行討論。
首先，需要理解內(nèi)聯(lián)內(nèi)容如何布局。網(wǎng)頁設(shè)計(jì)中對(duì)于行內(nèi)元素來說，這沒有塊級(jí)元素那么簡(jiǎn)單和直接，塊級(jí)元素只是生成框，通常不允許其他內(nèi)容與這些框并存。下面做個(gè)對(duì)照，來看一個(gè)塊級(jí)元素的內(nèi)部（如一個(gè)段落）。你可能會(huì)問：“所有文本行是怎么放在這里的？是誰在控制它們的擺放？我能做些什么？”
為了理解如何生成行，首先來考慮這樣一種情況，一個(gè)元素包含一個(gè)很長(zhǎng)的文本行，如圖7-27所示。注意，這里將整行包圍在一個(gè)span元素中，從而為這一行加了一個(gè)邊框，然后為之指定邊框樣式：
span {border:1px dashed black;}
圖7-27顯示了行內(nèi)元素包含在一個(gè)塊級(jí)元素中的最簡(jiǎn)單的情況。就其本身來說，這與包含兩個(gè)詞的段落沒有什么區(qū)別。唯一的區(qū)別是，圖7-27中有幾十個(gè)詞，而大多數(shù)段落不會(huì)包含諸如span之類的顯式行內(nèi)元素。
如果不是這種最簡(jiǎn)單的狀況，來看我們更熟悉的情況，你所要做的只是確定元素應(yīng)當(dāng)有多寬，然后斷行，使斷開的各部分能適應(yīng)元素的寬度剛好放下。
什么都沒變。你所做的只是將一行分成多個(gè)部分，然后把這些部分一個(gè)挨一個(gè)地堆放。
每個(gè)文本行的邊框剛好與各行的頂端和底端吻合。這是因?yàn)闆]有為行內(nèi)文本設(shè)置內(nèi)邊距或外邊距。注意，實(shí)際上邊框彼此稍有些重疊，例如，第一行的下邊框就在下一行上邊框的下面。這是因?yàn)檫吙驅(qū)嶋H上畫在各行之外的下一個(gè)像素上（假設(shè)你使用的是顯示器由于各行緊挨著，所以其邊框會(huì)重疊。
網(wǎng)頁設(shè)計(jì)中如果改變span樣式，使之有一個(gè)背景色，這些行的具體擺放就很清楚了。下面來看圖7-29，其中包含4個(gè)段落，每個(gè)段落有不同的text-align值，而且每個(gè)段落的文本行都有背景。
可以看到，網(wǎng)頁設(shè)計(jì)中并不是每一行都達(dá)到其父段落內(nèi)容區(qū)的邊界，父段落內(nèi)容區(qū)用一個(gè)灰色虛線邊框指示。對(duì)于左對(duì)齊的段落，行都?jí)旱蕉温鋬?nèi)容區(qū)的左邊對(duì)齊，各行在換行處結(jié)束。右對(duì)齊的段落則恰好相反。居中段落中，文本行的中心與段落的中心對(duì)齊。在最后一種情況下，即text-align的值為justify，各行必須與段落的內(nèi)容區(qū)寬度相等，所以行邊界要達(dá)到段落的內(nèi)容邊界。要調(diào)整各行中字母和字之間的間隔來彌補(bǔ)行實(shí)際長(zhǎng)度與段落寬度之間的差距。因此，文本兩端對(duì)齊時(shí)word-spacing的值可能被覆蓋（如果letter-spacing是一個(gè)長(zhǎng)度值，這個(gè)值則不能被覆蓋）。
這就很好地說明了這些最簡(jiǎn)單的情況下文本行是如何生成的。不過，后面將會(huì)看到，行內(nèi)格式化模型遠(yuǎn)沒有這么簡(jiǎn)單。
當(dāng)前文章標(biāo)題：網(wǎng)頁設(shè)計(jì)中的行內(nèi)元素
當(dāng)前URL：http://linjicha.cn/news/wzzz/Inline-elements.html
