網(wǎng)頁設計中的邊框合并

網(wǎng)站建設中,如果兩個或多個邊框相鄰,它們會相互合并。實際上,并不是完全合并,而是要看其中哪一個在其他邊框中占上風。哪些邊框會勝出,哪些邊框會被合并,對此有一些嚴格的規(guī)則:

如果某個合并邊框的border-style為hidden,它會優(yōu)先于所有其他合并邊框。這個位置上的所有邊框都隱藏。

如果某個合并邊框的border-style為none,它的優(yōu)先級最低。這個位置上不會畫出該邊框,除非所有其他合并邊框的border-style值都是non%注意,none 是 border-style 的默認值。

如果至少有一個合并邊框的border-style值不是none,而且所有合并邊框的border-style值都不是hidden,則窄邊框不敵更寬的邊框。如果多個合并邊框有相同的寬度,則會考慮邊框樣式,并采用以下順序(從最優(yōu)先到最不優(yōu)先):double、solid、dashed、dotted、ridge、outset、groove、inset,因此,如果兩個有相同寬度的邊框合并,而其中一個是dashed邊框,另一個是outset邊框,該位置上的邊框將是虛線邊框。

如果合并邊框的樣式和寬度都一樣,但是顏色不同,則按下表煩序使用元素的顏色(從最優(yōu)先到最不優(yōu)先): cell、row、row group、column、column group, table。因此,如果一個單元格和一個列的邊框合并(除顏色外,所有其他方面都一樣),會使用單元格的邊框顏色(和樣式及寬度)。如果合并邊框來自相同類型的元素,如兩個有相同樣式和寬度但不同顏色的行邊框,則顏色取最上最左邊框的顏色(在從左向右讀的語言中是這樣,而在從右向左讀的語言中,則取最上最右邊框的顏色)。

以下樣式和標記有助于說明這4個規(guī)則(結果見圖11-9所示):

table{border-collapse: collapse;

border: 3px outset gray;}

td {border: 1px solid gray; padding: 0.5em;}

#r2c1,#r2c2 {border-style: hidden;}

#r1c1,#r1c4 {border-width: Spx;}

#r2c4.{border-style: double; border-width: 3px;}

#r3c4 {border-style: dotted; border-width: 2px;}

#r4c1 {border-bottom-style: hidden;}

#r4c3 {border-top: 13px solid silver;}

<table>

<tr>

<td id="r1c1">1 -1</td><td id="r1c2">1-2</td>

<td id="r1c3">1-3</td><td id="r1c4">1-4</td>

</tr>

<tr>

<td id="r2c1*>2-l</td><td id="r2c2">2-2</td>

<td id=T2c3->2-3</td><td id="r2c4">2-4</td>

<td id="r3cl">3-1</td><td id="r3c2">3-2</td>

<td id="r3c3">3-3</td><td id="r3c4">3-4</td>

</tr>

<tr>

<td id="r4cl">4-1</td><td id="r4c2">4-2</td>

<td id="r4c3">4-3</td><td id=T4c4">4-4</td>

</tr>

</table>

下面依次考慮網(wǎng)頁設計人員對各個單元格發(fā)生了什么:

對于單元格1-1和1-4, 5像素的邊框比其他所有相鄰邊框都寬,所以5像素的邊框不僅會勝出其相鄰單元格邊框,還會優(yōu)先于表本身的邊框,只有單元格1-1的下邊框例外,在此不再顯示5像素的邊框,

單元格1-1的下邊框之所以沒有勝出,是因為單元格2-1和2-2顯式聲明了邊框隱藏,這就從這些單元格的邊界上去除了所有邊框。同樣地,表的邊框(單元格2-1左邊界上的邊框)也落敗于該單元格的邊框。單元格4-1的下邊框也隱藏,所以這個單元格下面不會出現(xiàn)任何邊框。

單元格2-4的3像素寬double邊框頂部被單元格1-4的5像素實線邊框所覆蓋,不過這個double邊框會覆蓋該單元格本身與單元格2-3之間的邊框,因為這個double 邊框不僅更寬而且“更有意思”。單元格2-4的邊框還覆蓋了它自己與單元格3-4之間的邊框,盡管二者寬度相同,但單元格2-4邊框的double樣式定義為比單元格3-4的dotted邊框“更有意思”。

單元格3-3的13像素銀色下邊框不僅會覆蓋單元格4-3的上邊框,還會影響這兩個單元格以及包含這兩個單元格的行中的內容布局。

對于沿著表外邊界而且沒有指定樣式的單元格,其1像素實線邊框會被table元素本身的3像素outset邊框所覆蓋。

聽上去很復雜,也確實如此,不過這些行為都很直觀,通過動手實踐就會更清楚。但是需要指出,對于Netscape 1時代的基本HTML表,其表示僅用很簡單的一組規(guī)則就可以描述,如下(結果見圖11-10所示)。

table{border-collapse: collapse; border: 2px outset gray;}

td {border: 1px inset gray;}

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