網(wǎng)頁設(shè)計(jì)中的高度和對(duì)齊

高度

網(wǎng)頁設(shè)計(jì)時(shí),確定表的寬度要花這么大功夫,現(xiàn)在你可能想知道計(jì)算高度又會(huì)多復(fù)雜。實(shí)標(biāo)上,在CSS 中,高度計(jì)算相當(dāng)簡(jiǎn)單,不過瀏覽器開發(fā)人員可能不這么認(rèn)為。

最容易的一種情況是,直接由height屬性顯式設(shè)置高度。在這種情況下,表的高度就由height值確定。這說明表可能比行高總和高或矮,不過2006年4月11日發(fā)布的CSS 2.1規(guī)范草案指出,將height看作是表框的最小高度。對(duì)于這些情況,CSS2.1規(guī)范明確地拒絕定義會(huì)發(fā)生什么,而只是指出CSS的將來版本可能解決這個(gè)問埋。用戶代理可以擴(kuò)展或收縮表中的表行來適應(yīng)表的高度,也可以在表框中留白或者采取其他完全不同的做法。這完全由各個(gè)用戶代理決定。

如果表的高度是auto,其高度則是表中所有行的行高再加上所有邊框和單元格間隔的總和。要確定各行的高度,用戶代理需要完成一個(gè)與確定列寬類似的過程。它要計(jì)算各單元格內(nèi)容的最小和最大高度,然后使用這些最小和最大高度得出行的最小和最大高度。確定了所有行的最小和最大高度后,用戶代理再得出各行的高度應(yīng)當(dāng)是多少,把這些行加在一起,然后使用這個(gè)計(jì)算確定表的高度。這與行內(nèi)布局很類似,只不過對(duì)于結(jié)果不那么確定。

除了處理有明確高度的表以及表中的行高,還可以增加以下內(nèi)容,這是CSS2.1中沒有定義的:

表單元格高度為百分?jǐn)?shù)時(shí)的效果

表行和行組高度為百分?jǐn)?shù)時(shí)的效果

跨行單元格如何影響所跨行的高度(除了這些行必須包含該跨行單元格)

可以看到,表的高度計(jì)算在很大程度上留給用戶代理來決定,歷史證明,各用戶代理很可能有不同的做法,所以你要盡可能避免設(shè)置高度。

對(duì)齊

有意思的是,相對(duì)于單元格和行的高度,定義單元格中內(nèi)容的對(duì)齊要容易得多。甚至垂直對(duì)齊也很容易定義(垂直對(duì)齊很容易影響行高)。

水平對(duì)齊是最簡(jiǎn)單的。要讓一個(gè)單元格中的內(nèi)容對(duì)齊,可以使用text-align屬性。實(shí)際上,單元格會(huì)處理為一個(gè)塊級(jí)框,其中的所有內(nèi)容都根據(jù)text-align值對(duì)齊(有關(guān)text-align的詳細(xì)內(nèi)容見第6章)。

要將一個(gè)表單元格中的內(nèi)容垂直對(duì)齊,可以使用vertical-align屬性。它使用的很多值與垂直對(duì)齊行內(nèi)內(nèi)容是一樣的,不過應(yīng)用到表單元格時(shí)這些值的含義有所變化。下面對(duì)三種最簡(jiǎn)單的情況做個(gè)總結(jié):

top

單元格內(nèi)容的頂端與其行頂端對(duì)齊;對(duì)于跨行單元格,單元格內(nèi)容的頂端與其所跨的第一行的頂端對(duì)齊。

bottom

單元格內(nèi)容的底端與其行底端對(duì)齊,對(duì)于跨行單元格,單元格內(nèi)容的底端與其所跨的最后一行的底端對(duì)齊。

middle

單元格內(nèi)容的中間與其行中間對(duì)齊;對(duì)于跨行單元格,單元格內(nèi)容的中間與其所跨行的中間對(duì)齊。

這三種情況見圖使用了以下樣式和標(biāo)記:

table{table-layout: auto; width: 20em;

border-collapse: separate; border-spacing: 3px;}

td {border: 1px solid; background: silver; padding: 0;}

div {border: 1px dashed gray; background: white;}

#r1c1 {vertical-align: top; height: l0em;}

#r1c2 {verCical-align: middle;}

#rlc3 {vertical-align: bottom;}

<table>

<tr>

<td id="r1c1">

<div>

The contents of this cell are top-aligned.

</div>

</td>

<td id="r1c2">

<div>

The contents of this cell are middle-aligned.

</div>

</ta>

<td id="r1c3">

The contents of this cell are bottom-aligned.

</div>

</cd>

</tr>

</table>

設(shè)計(jì)網(wǎng)頁的時(shí)候,在上述各種情況下,會(huì)自動(dòng)地增加單元格本身的內(nèi)邊距完成對(duì)齊,來達(dá)到所需的效果。圖11-13的第一個(gè)單元格中,單元格的下內(nèi)邊距修改為等于單元格框的高度與單元格中內(nèi)容的高度之差。對(duì)于第二個(gè)單元格,單元格的上下內(nèi)邊距重置為相等,從而將單元格的內(nèi)容垂直居中。最后一個(gè)單元格中,單元格的上內(nèi)邊距得到修改。

第4個(gè)可能的對(duì)齊值是baseline,這比前三個(gè)值要稍微復(fù)雜一些:

baseline

網(wǎng)頁設(shè)計(jì)時(shí),單元格的基線與其行的基線對(duì)齊,對(duì)于跨行單元格,該單元格的基線與所跨的第一行的基線對(duì)齊。

行的基線由該行所有單元格中最低初始單元格基線定義(也就是第一個(gè)文本行的基線)。因此,在圖11-14中,行的基線由第三個(gè)單元格定義,這個(gè)單元格初始基線最低。前兩個(gè)單元格則將其第一個(gè)文本行的基線與該行基線對(duì)齊。

與頂端對(duì)齊、居中對(duì)齊和底端對(duì)齊類似,基線對(duì)齊的單元格內(nèi)容也是通過調(diào)整單元格的上下內(nèi)邊距來放置,如果一行中的所有單元格都不是基線對(duì)齊,那么這一行甚至沒有基線,它也不需要有基線。

如果某些單元格是基線對(duì)齊,則確定該行的基線,并放置這些基線對(duì)齊單元格的內(nèi)容。

放置所有頂端對(duì)齊單元格的內(nèi)容。行現(xiàn)在有了一個(gè)臨時(shí)高度,由已經(jīng)放置了內(nèi)容的單元格的最低單元格底端確定。

如果剩下的單元格是居中對(duì)齊或底端對(duì)齊,而且內(nèi)容高度大于臨時(shí)行高,行高則增加到可以包含其中最高的單元格。

放置所有余下單元格的內(nèi)容。如果單元格內(nèi)容的高度比行高小,則增加單元格的內(nèi)邊距,使之適應(yīng)行高。

vertical-align值sub、super, text-top和 text-bottom應(yīng)用到表單元格時(shí)會(huì)被忽略。

th {vertical-align: text-top;}

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))