行內(nèi)格式化

第6章曾討論過(guò)，網(wǎng)頁(yè)設(shè)計(jì)中所有元素都有一個(gè)line-height。這個(gè)值會(huì)顯著地影響行內(nèi)元素如何顯示，所以要特別注意。

首先來(lái)看如何確定一行的高度。行的高度（或行框的高度）由其組成元素和其他內(nèi)容（如文本）的高度確定。有一點(diǎn)很重要，line-height實(shí)際上只影響行內(nèi)元素和其他行內(nèi)內(nèi)容，而不影響塊級(jí)元素，至少不會(huì)直接影響塊級(jí)元素。也可以為一個(gè)塊級(jí)元素設(shè)置line-height 值，但是這個(gè)值只是應(yīng)用到塊級(jí)元素的內(nèi)聯(lián)內(nèi)容時(shí)才會(huì)有視覺(jué)影響。例如，考慮以下空段落：

<p style="line-height: 0.25em;"></p>

由于沒(méi)有內(nèi)容，這個(gè)段落沒(méi)有任何顯示，你什么也看不到。這個(gè)段落的line-height可能是某個(gè)值（不論是0.25em還是25in），但是如果沒(méi)有內(nèi)容，line-height是多少對(duì)于創(chuàng)建行框來(lái)說(shuō)都沒(méi)有任何區(qū)別。

當(dāng)然可以為一個(gè)塊級(jí)元素設(shè)置line-height值，并將這個(gè)值應(yīng)用到塊中的所有內(nèi)容，而不論內(nèi)容是否包含在行內(nèi)元素中。從某種程度上講，塊級(jí)元素中包含的各文本行本身都是行內(nèi)元素，而不論是否真正用行內(nèi)元素的標(biāo)記包圍起來(lái)。只要你愿意，可以像下面這樣寫(xiě)一個(gè)虛構(gòu)的標(biāo)記序列：

<p>

<line>This is a paragraph with a number of</line>

<line>lines of text which make up the</line>

<line>contents.</line>

</p>

盡管line標(biāo)記并不真的存在，但是段落表現(xiàn)得就像有這些標(biāo)記一樣，每個(gè)文本行從段落繼承了樣式。因此，網(wǎng)頁(yè)設(shè)計(jì)只需為塊級(jí)元素創(chuàng)建line-height規(guī)則，而不必顯式地為其所有行內(nèi)元素（也許只是虛構(gòu)的行內(nèi)元素）聲明line-height。

虛構(gòu)的line元素確實(shí)可以說(shuō)明對(duì)塊級(jí)元素設(shè)置line-height會(huì)有怎樣的行為。根據(jù)CSS規(guī)范，在塊級(jí)元素上聲明line-height會(huì)為該塊級(jí)元素的內(nèi)容設(shè)置一個(gè)最小行框高度。因此，聲明p.spacious{line-height: 24pt;}意味著每個(gè)行框的最小高度為24點(diǎn)。從理論上講，只有行內(nèi)元素的內(nèi)容才會(huì)繼承這個(gè)行高。大多數(shù)文本并未包含在行內(nèi)元素中。因此，如果假裝各行包含在虛構(gòu)的line元素中，這個(gè)摸型就能很好地工作。

行內(nèi)非替換元素

在前面的格式化知識(shí)基礎(chǔ)上，來(lái)討論如果網(wǎng)頁(yè)設(shè)計(jì)行中只包含非替換元素（或匿名文本）將如何構(gòu)造。了解這一點(diǎn)后，你就能更好地理解行內(nèi)布局中非替換元素和替換元素之間的區(qū)別。

建立框

首先，對(duì)于行內(nèi)非替換元素或匿名文本某一部分，font-size值確定了內(nèi)容區(qū)的高度。如果一個(gè)行內(nèi)元素font-size為15px，則內(nèi)容區(qū)的高度為15像素，因?yàn)樵刂兴衑m 框的高度都是15像素，如圖7-30所示，

圖7-30: em框確定內(nèi)容區(qū)離度

下面再來(lái)考慮元素的line-height值，以及它與font-size值之差。如果一個(gè)行內(nèi)非替換元素的font-size為15px, line-height為21px，則相差6像素。用戶代理將這6像素一分為二，將其一半分別應(yīng)用到內(nèi)容區(qū)的頂部和底部，這就得到了行內(nèi)框。這個(gè)過(guò)程如圖7-31所示。

圖7-31：內(nèi)容區(qū)加上行間距就等于行內(nèi)框

假設(shè)有以下標(biāo)記：

<p style="font-size: 12px; line-height: 12px;">

This is text,<em>some of which is emphasized</em>, plus other text<br> which is <strong style="font-size: 24px;">strongly emphasized</strong> and which is<br>

larget than the surrounding text.

</p>

在這個(gè)例子中，大多數(shù)文本的font-size都是12px，只有一個(gè)行內(nèi)非替換元素中的文本大小是24px。不過(guò)，所有文本的line-height都是12px，因?yàn)閘ine-height是一個(gè)繼承屬性。因此，strong元素的line-height也是12px。

所以，對(duì)于font-size和line-height都是12px的各部分文本，內(nèi)容高度沒(méi)有改變（因?yàn)?2px和12px之差為0)，因此，行內(nèi)框的高度為12像素。不過(guò)，對(duì)于strong文本，line-height和font-size之差是-12px，將其除2來(lái)確定半間距（-6px），再把這個(gè)半間距分別增加到內(nèi)容區(qū)的頂部和底部，就得到了行內(nèi)框。由于這里增加的都是負(fù)數(shù)，所以最后行內(nèi)框高度為12像素。12像素高的行內(nèi)框在元素內(nèi)容區(qū)（24像素高）中垂直居中，所以行內(nèi)框?qū)嶋H上小于內(nèi)容區(qū)。

至止，聽(tīng)上去對(duì)網(wǎng)頁(yè)設(shè)計(jì)各部分文本所做的都一樣，而且所有行內(nèi)框大小都相等，但并非如此。第二行中的行內(nèi)框盡管大小相同，但它們排列得并不整齊，因?yàn)槲谋径际前椿€對(duì)齊的（見(jiàn)圖7-32）。

圖7-32：行中的行內(nèi)框

由于行內(nèi)框確定了整個(gè)行框的高度，其相互位置很重要。網(wǎng)頁(yè)設(shè)計(jì)中行框定義為行中最高行內(nèi)框的頂端到最低行內(nèi)框底端之間的距離，而且各行框的頂端挨著上一行行框的底端。根據(jù)圖7-32所示的結(jié)果，段落將如圖7-33所示。

圖7-33：段落中的行框

注意：在圖7-33中可以看到，中間一行比另外兩行要高，不過(guò)還是不夠大，不能把所有文本都包含在內(nèi)。匿名文本的行內(nèi)框確定了行框的底端，strong元素行內(nèi)框的頂端則設(shè)置了行框的頂端。由于行內(nèi)框的頂端在元素內(nèi)容區(qū)內(nèi)部，所以元素的內(nèi)容落在了行框的外面，實(shí)際上與其他行框發(fā)生了重疊。其結(jié)果是，文本行看上去很不規(guī)則。本章后面還將介紹一些方法來(lái)處理這種行為，另外會(huì)介紹一些能得到一致基線間隔的方法。