CSS 最常用的長度單位有像素 (px)、百分比 (%)、另外還有 rem、em、vh、vw、pt、cm、mm、in 等。這些單位可以用來設置元素的寬度、高度、邊框尺寸、字體大小等。
- 像素 (px) 單位是最常用的單位之一。它是固定的長度單位，相對于電子屏幕的物理像素來計算。以下是一個代碼示例：
div {
width: 200px;
height: 100px;
font-size: 16px;
border: 1px solid #000;
}
登錄后復制
在上面的代碼示例中，width 和 height 屬性使用了像素單位來定義 div 元素的寬度和高度，font-size 屬性使用像素單位來定義字體大小，border 屬性的寬度也使用了像素單位。
- 百分比 (%) 單位是相對于父元素的尺寸來計算的。以下是一個代碼示例：
div {
width: 50%;
height: 50%;
}
登錄后復制
在上面的代碼示例中，div 元素的寬度和高度被設置為父元素尺寸的 50%。
- rem 單位是相對于根元素 (即 html 元素) 的字體大小來計算的。以下是一個代碼示例：
html {
font-size: 16px;
}
div {
width: 10rem;
height: 5rem;
font-size: 1.2rem;
}
登錄后復制
在上面的代碼示例中，根元素的字體大小被設置為 16px，div 元素的寬度和高度是根元素字體大小的 10 倍，字體大小是根元素字體大小的 1.2 倍。
- 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。
總之，不同的情況下需要選擇合適的長度單位來達到最佳的效果。
