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

  • 2019-05-23 16:53:15
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

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

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

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

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

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

以下樣式和標記有助于說(shuō)明這4個(gè)規則(結果見(jiàn)圖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)頁(yè)設計人員對各個(gè)單元格發(fā)生了什么:

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

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

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

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

對于沿著(zhù)表外邊界而且沒(méi)有指定樣式的單元格,其1像素實(shí)線(xiàn)邊框會(huì )被table元素本身的3像素outset邊框所覆蓋。

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

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

td {border: 1px inset gray;}

當前文章標題:網(wǎng)頁(yè)設計中的邊框合并

當前URL:http://amzcoolest.com/news/wzzz/3025.html

上一篇:網(wǎng)頁(yè)設計中的合并邊框布局

下一篇:網(wǎng)頁(yè)設計中的表大小

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看