Board logo

標題: HTML 長度單位 [打印本頁]

作者: 陳育霖    時間: 2023-8-9 23:33     標題: HTML 長度單位

本帖最後由 陳育霖 於 2023-8-9 23:35 編輯

px 像素 是螢幕上的最小單位。在網頁設計中,常使用像素來指定元素的寬度、高度、邊框等。
  1. <p style="font-size: 20px">這是20像素大小的文字。</p>
複製代碼
% 百分比 是相對於父元素的大小的一個比例。例如 : 設置元素的寬度為50%。
  1. <div style="width: 50%; background-color: lightblue;">這個區塊寬度是父元素寬度的一半。</div>
複製代碼
em 是相對於元素的字型大小的一個單位。例如:如果一個元素的字型大小為16px,設置元素的寬度為2em,則其寬度將是32px。
  1. <div style="width: 2em; height: 2em; background-color: lightgreen;">這個正方形的寬度和高度都是根據字型大小的2倍。</div>
複製代碼
vw 視窗寬度的百分比:vw是相對於視窗的寬度的一個百分比。例如:1vw表示視窗寬度的1%。
  1. <div style="width: 50vw; background-color: lightyellow;">這個區塊寬度是視窗寬度的50%</div>
複製代碼
vh 視窗高度的百分比:vh是相對於視窗的高度的一個百分比。例如:1vh表示視窗高度的1%。
  1. <div style="height: 30vh; background-color: lightyellow;">這個區塊高度是視窗高度的30%。</div>
複製代碼
cm、mm、in、pt、pc等:這些是絕對長度單位,通常用於列印等場景。




歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/) Powered by Discuz! 7.2