網(wǎng)頁設計中的行內(nèi)格式化

  • 2018-10-30 15:56:51
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.iy5y368.cn

行內(nèi)格式化

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

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

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

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

當然可以為一個塊級元素設置line-height值,并將這個值應用到塊中的所有內(nèi)容,而不論內(nèi)容是否包含在行內(nèi)元素中。從某種程度上講,塊級元素中包含的各文本行本身都是行內(nèi)元素,而不論是否真正用行內(nèi)元素的標記包圍起來。只要你愿意,可以像下面這樣寫一個虛構的標記序列:

<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標記并不真的存在,但是段落表現(xiàn)得就像有這些標記一樣,每個文本行從段落繼承了樣式。因此,網(wǎng)頁設計只需為塊級元素創(chuàng)建line-height規(guī)則,而不必顯式地為其所有行內(nèi)元素(也許只是虛構的行內(nèi)元素)聲明line-height。

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

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

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

建立框

首先,對于行內(nèi)非替換元素或匿名文本某一部分,font-size值確定了內(nèi)容區(qū)的高度。如果一個行內(nèi)元素font-size為15px,則內(nèi)容區(qū)的高度為15像素,因為元素中所有em 框的高度都是15像素,如圖7-30所示,

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

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

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

假設有以下標記:

<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>

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

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

至止,聽上去對網(wǎng)頁設計各部分文本所做的都一樣,而且所有行內(nèi)框大小都相等,但并非如此。第二行中的行內(nèi)框盡管大小相同,但它們排列得并不整齊,因為文本都是按基線對齊的(見圖7-32)。

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

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

圖7-33:段落中的行框

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

當前文章標題:網(wǎng)頁設計中的行內(nèi)格式化

當前URL:http://m.iy5y368.cn/news/wzzz/Inline-formatting.html

上一篇:網(wǎng)頁設計中的行內(nèi)元素

下一篇:網(wǎng)頁設計中的行高

網(wǎng)站建設、網(wǎng)絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)