「Box Model」修訂間的差異
跳至導覽
跳至搜尋
(新頁面: #地理填圖: #*[https://upload.wikimedia.org/wikipedia/commons/4/4d/BlankMap-World.svg 世界空白圖] #*100 國列表 #六年制學程選取那三樣客觀因...) |
|||
| (未顯示由 2 位使用者於中間所作的 18 次修訂) | |||
| 第1行: | 第1行: | ||
| − | + | [[分類:HTML]] | |
| − | + | <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Box-Modell-zhtw.svg/576px-Box-Modell-zhtw.svg.png' /> | |
| − | + | *padding(內距): | |
| − | + | *#控制區域如 DIV 、 span 、表格的內部距離(例如文字或圖片與邊框的距離) | |
| − | + | *#不可以設定負值,這點與 margin 不同。 | |
| − | + | *#基本語法範例:<p><span style='border:dashed 1pt;padding:5pt;'>padding:上 右 下 左;</span> <span style='border:dashed 1pt;padding:5pt;'>padding:上下 左右;</span> <span style='border:dashed 1pt;padding:5pt;'>padding:上 左右 下;</span> <span style='border:dashed 1pt;padding:5pt;'>padding:四個邊同樣値;</span></p> | |
| − | + | *#padding:auto;:讓瀏覽器自己去設定 | |
| − | + | *#padding:%;:讓瀏覽器自己去設定,跟邊界元素有關。 | |
| − | + | *margin(邊沿): | |
| − | + | *#控制一個區域(例如 DIV 或 span)的外邊界距離,俗稱外距。 | |
| − | + | *#可以設定負値,會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如,我們將 A 區塊的 margin-bottom 設為 0 , B 區塊的 margin-top 設為 -10px ,那麼 B 區塊的文字就會疊到 A 區塊的文字上。 | |
| − | + | *#基本語法範例:<p><span style='border:dashed 1pt;padding:5pt;'>margin:上 右 下 左;</span> <span style='border:dashed 1pt;padding:5pt;'>margin:上下 左右;</span> <span style='border:dashed 1pt;padding:5pt;'>margin:上 左右 下;</span> <span style='border:dashed 1pt;padding:5pt;'>margin:四個邊同樣値;</span></p> | |
| − | + | *#margin:auto;:讓瀏覽器自己去設定。 | |
| − | + | *#margin:%;:讓瀏覽器自己去設定,跟邊界元素有關。 | |
| − | + | *border(邊框): | |
| − | + | *#邊框粗細:用長度表達 | |
| − | + | *#邊框顏色:可以使用色標準色碼或顏色的英文名稱表達 | |
| − | + | *#邊框樣式:可以設定實線(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='position:relative;top:0.7em;border-top:5px double red;'><span style='position:relative;top:-0.7em;'>雙刪除線</span></span>:<span style='position:relative;top:0.7em;border-top:5px double red;'><span style='position:relative;top:-0.7em;'>雙刪除線</span></span> | |
| − | + | *#*先用 position:relative; 讓元素「可用top」以相對其「原本該出現的所在位置」,調整至新位置。 | |
| − | + | *#*再用 top:0.7em; 在上方塞約半個字,使上框線下降約半個字 | |
| − | # | + | *#*最後增加一個子元素,用 top:-0.7em; 讓字回到「原來該出現的位置」。 |
| − | + | *#*須要如此做的原因是因為 text-decoration: 樣式只能畫單刪除線,無法指示畫出雙刪除線。 | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | # | ||
| − | |||
| − | # | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | # | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | # | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | # | ||
| − | |||
| − | # | ||
| − | |||
| − | # | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | # | ||
| − | |||
| − | |||
| − | |||
| − | # | ||
| − | |||
| − | |||
| − | # | ||
| − | |||
| − | # | ||
| − | |||
| − | |||
| − | |||
| − | # | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | <table | ||
| − | <tr> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | </ | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | </tr> | ||
| − | |||
| − | <tr> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | </ | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | </tr> | ||
| − | |||
| − | <tr> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | </ | ||
| − | |||
| − | < | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | </ | ||
| − | </ | ||
| − | |||
| − | = | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | *# | ||
| − | * | ||
| − | *# | ||
| − | * | ||
| − | |||
| − | |||
| − | |||
| − | *# | ||
| − | * | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | *# | ||
| − | * | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
於 2019年1月6日 (日) 20:39 的最新修訂
- padding(內距):
- 控制區域如 DIV 、 span 、表格的內部距離(例如文字或圖片與邊框的距離)
- 不可以設定負值,這點與 margin 不同。
- 基本語法範例:
padding:上 右 下 左; padding:上下 左右; padding:上 左右 下; padding:四個邊同樣値;
- padding:auto;:讓瀏覽器自己去設定
- padding:%;:讓瀏覽器自己去設定,跟邊界元素有關。
- margin(邊沿):
- 控制一個區域(例如 DIV 或 span)的外邊界距離,俗稱外距。
- 可以設定負値,會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如,我們將 A 區塊的 margin-bottom 設為 0 , B 區塊的 margin-top 設為 -10px ,那麼 B 區塊的文字就會疊到 A 區塊的文字上。
- 基本語法範例:
margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値;
- margin:auto;:讓瀏覽器自己去設定。
- margin:%;:讓瀏覽器自己去設定,跟邊界元素有關。
- border(邊框):
- 邊框粗細:用長度表達
- 邊框顏色:可以使用色標準色碼或顏色的英文名稱表達
- 邊框樣式:可以設定實線(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;
- 雙刪除線:<span style='position:relative;top:0.7em;border-top:5px double red;'><span style='position:relative;top:-0.7em;'>雙刪除線</span></span>
- 先用 position:relative; 讓元素「可用top」以相對其「原本該出現的所在位置」,調整至新位置。
- 再用 top:0.7em; 在上方塞約半個字,使上框線下降約半個字
- 最後增加一個子元素,用 top:-0.7em; 讓字回到「原來該出現的位置」。
- 須要如此做的原因是因為 text-decoration: 樣式只能畫單刪除線,無法指示畫出雙刪除線。