常用的CSS長度單位有哪些？

CSS 最常用的長度單位有像素 (px)、百分比 (%)、另外還有 rem、em、vh、vw、pt、cm、mm、in 等。這些單位可以用來設定元素的寬度、高度、邊框尺寸、字體大小等。

1. 像素 (px) 單位是最常用的單位之一。它是固定的長度單位，相對於電子螢幕的物理像素來計算。以下是一個程式碼範例：

div {
    width: 200px;
    height: 100px;
    font-size: 16px;
    border: 1px solid #000;
}

在上面的程式碼範例中，width 和height 屬性使用了像素單位來定義div 元素的寬度和高度，font-size 屬性使用像素單位來定義字體大小，border 屬性的寬度也使用了像素單位。

2. 百分比 (%) 單位是相對於父元素的尺寸來計算的。以下是一個程式碼範例：

div {
    width: 50%;
    height: 50%;
}

在上面的程式碼範例中，div 元素的寬度和高度被設定為父元素尺寸的 50%。

3. rem 單位是相對於根元素 (即 html 元素) 的字體大小來計算的。以下是一個程式碼範例：

html {
    font-size: 16px;
}

div {
    width: 10rem;
    height: 5rem;
    font-size: 1.2rem;
}

在上面的程式碼範例中，根元素的字體大小被設定為16px，div 元素的寬度和高度是根元素字體大小的10 倍，字體大小是根元素字體大小的1.2 倍。

4. em 單位是相對於元素本身的字體大小來計算的。以下是一個程式碼範例：

div {
    font-size: 16px;
    width: 2em;
    height: 2em;
}

在上面的程式碼範例中，div 元素的寬度和高度被設定為元素自身字體大小的兩倍。

除了上述單位外，還有一些其他的長度單位：

• vh (viewport height) 表示相對於視窗高度的百分比。
• vw (viewport width) 表示相對於視窗寬度的百分比。
• pt (point) 是列印單位，1pt 約等於 1/72 英吋。
• cm (centimeter) 表示厘米，1cm 約等於 96px/2.54。
• mm (millimeter) 表示毫米，1mm 約等於 96px/25.4。
• in (inch) 表示英寸，1in 約等於 96px。

總之，不同的情況下需要選擇合適的長度單位來達到最佳的效果。

以上是常用的CSS長度單位有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！