Box Model:修訂版本之間的差異

出自六年制學程
跳轉到: 導覽搜尋
第 17 行: 第 17 行:
 
*#邊框顏色:可以使用色標準色碼或顏色的英文名稱表達
 
*#邊框顏色:可以使用色標準色碼或顏色的英文名稱表達
 
*#邊框樣式:可以設定實線(solid)、虛線(dashed)、雙實線(double)、連續點(dotted)等:<table style='border:none;'><tr><td style='border:none;'><div style='border:1pt #000 solid;padding:10pt;'>border-style:solid;</div></td><td style='border:none;'><div style='border:1pt #000 dotted;padding:10pt;'>border-style:dotted;</div></td><td style='border:none;'><div style='border:1pt #000 dashed;padding:10pt;'>border-style:dashed;</div></td></tr><tr><td style='border:none;'><div style='border:3pt #000 double;padding:10pt;'>border-style:double;</div></td><td style='border:none;'><div style='border:5pt #000 outset;padding:10pt;'>border-style:outset;</div></td><td style='border:none;'><div style='border:5pt #000 groove;padding:10pt;'>border-style:groove;</div></td></tr><tr><td style='border:none;'><div style='border:5pt #000 ridge;padding:10pt;'>border-style:ridge;</div></td><td style='border:none;'><div style='border:5pt #000 inset;padding:10pt;'>border-style:inset;</div></td><td style='border:none;'><div style='border:5pt #000 none;padding:10pt;'>border-style:none;</div></td></tr></table>
 
*#邊框樣式:可以設定實線(solid)、虛線(dashed)、雙實線(double)、連續點(dotted)等:<table style='border:none;'><tr><td style='border:none;'><div style='border:1pt #000 solid;padding:10pt;'>border-style:solid;</div></td><td style='border:none;'><div style='border:1pt #000 dotted;padding:10pt;'>border-style:dotted;</div></td><td style='border:none;'><div style='border:1pt #000 dashed;padding:10pt;'>border-style:dashed;</div></td></tr><tr><td style='border:none;'><div style='border:3pt #000 double;padding:10pt;'>border-style:double;</div></td><td style='border:none;'><div style='border:5pt #000 outset;padding:10pt;'>border-style:outset;</div></td><td style='border:none;'><div style='border:5pt #000 groove;padding:10pt;'>border-style:groove;</div></td></tr><tr><td style='border:none;'><div style='border:5pt #000 ridge;padding:10pt;'>border-style:ridge;</div></td><td style='border:none;'><div style='border:5pt #000 inset;padding:10pt;'>border-style:inset;</div></td><td style='border:none;'><div style='border:5pt #000 none;padding:10pt;'>border-style:none;</div></td></tr></table>
*#<span style='margin:0;position:relative;top:0.8em;border-top:5px double red;'><span style='margin:0;position:relative;top:-0.8em;'>雙刪除線</span></span>
+
*#<span style='position:relative;top:0.8em;border-top:5px double red;'><span style='position:relative;top:-0.8em;'>雙刪除線</span></span>

2019年1月2日 (三) 15:57的修訂版本

  • padding(內距):
    1. 控制區域如 DIV 、 span 、表格的內部距離(例如文字或圖片與邊框的距離)
    2. 不可以設定負值,這點與 margin 不同。
    3. 基本語法範例:

      padding:上 右 下 左; padding:上下 左右; padding:上 左右 下; padding:四個邊同樣値;

    4. padding:auto;:讓瀏覽器自己去設定
    5. padding:%;:讓瀏覽器自己去設定,跟邊界元素有關。
  • margin(邊沿):
    1. 控制一個區域(例如 DIV 或 span)的外邊界距離,俗稱外距。
    2. 可以設定負値,會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如,我們將 A 區塊的 margin-bottom 設為 0 , B 區塊的 margin-top 設為 -10px ,那麼 B 區塊的文字就會疊到 A 區塊的文字上。
    3. 基本語法範例:

      margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値;

    4. margin:auto;:讓瀏覽器自己去設定。
    5. margin:%;:讓瀏覽器自己去設定,跟邊界元素有關。
  • border(邊框):
    1. 邊框粗細:用長度表達
    2. 邊框顏色:可以使用色標準色碼或顏色的英文名稱表達
    3. 邊框樣式:可以設定實線(solid)、虛線(dashed)、雙實線(double)、連續點(dotted)等:
      border-style:solid;
      border-style:dotted;
      border-style:dashed;
      border-style:double;
      border-style:outset;
      border-style:groove;
      border-style:ridge;
      border-style:inset;
      border-style:none;
    4. 雙刪除線