<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          網頁設計中的邊框合并

          • 2019-05-23 16:53:15
          • 閱讀次數:
          • 作者:盈嵐科技小編
          • 來源:http://www.1c4w.com

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

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

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

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

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

          以下樣式和標記有助于說明這4個規則(結果見圖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>

          下面依次考慮網頁設計人員對各個單元格發生了什么:

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

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

          單元格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表,其表示僅用很簡單的一組規則就可以描述,如下(結果見圖11-10所示)。

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

          td {border: 1px inset gray;}

          當前文章標題:網頁設計中的邊框合并

          當前URL:http://www.1c4w.com/news/wzzz/3025.html

          上一篇:網頁設計中的合并邊框布局

          下一篇:網頁設計中的表大小

          網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
          鸭子tv国产在线永久播放