1.5 常见单位与长度

在 CSS 中，单位是用来定义元素大小、间距、位置等样式的基础单位。掌握不同单位的使用方式及其适用场景，能帮助开发者在网页布局中灵活而精确地控制元素的外观。常见的 CSS 单位分为两大类：绝对单位和相对单位。

1.5.1 绝对单位（Absolute Units）

绝对单位是固定的，意味着它们的尺寸不会随着页面的缩放或父元素的变化而变化。常见的绝对单位有：

px（像素，Pixel）
- px 是最常用的单位，用于设置元素的宽度、高度、边距、字体大小等。1px 是屏幕上一个物理像素的大小。
- 适用场景：适用于精确控制元素的尺寸，尤其是当元素尺寸需要固定时。
- 例子：
```
p {
  font-size: 16px;
}
```
pt（磅，Point）
- pt 是传统的打印单位，1pt 等于 1/72 英寸。它通常用于打印页面或文档中。
- 适用场景：适用于打印样式或需要与印刷文档兼容的场景。
- 例子：
```
p {
  font-size: 12pt;
}
```
in（英寸，Inch）
- in 是英寸单位，1in 等于 2.54 厘米。在网页设计中较少使用。
- 适用场景：在印刷设计中可能会使用。
- 例子：
```
div {
  width: 2in;
}
```
cm（厘米，Centimeter）和 mm（毫米，Millimeter）
- cm 和 mm 是常见的长度单位，主要用于印刷和实际物理尺寸的设置。1cm 等于 10mm。
- 适用场景：与物理尺寸有关的设计，如打印或转换为实际测量。
- 例子：
```
div {
  width: 5cm;
}
```
em（字体大小的倍数）
- em 是相对单位，用于基于父元素或当前元素的字体大小来设置尺寸。1em 等于当前元素的字体大小。
- 适用场景：适用于基于字体大小的布局和响应式设计。
- 例子：
```
p {
  font-size: 2em; /* 字体大小为父元素字体大小的两倍 */
}
```
rem（相对于根元素的字体大小）
- rem 是相对于根元素（通常是 <html> 元素）字体大小的单位，1rem 等于根元素的字体大小。默认情况下，浏览器的根元素字体大小通常是 16px。
- 适用场景：在响应式设计中，rem 常用来确保布局和字体的相对大小。
- 例子：
```
body {
  font-size: 1rem; /* 基于根元素字体大小 */
}
p {
  font-size: 1.5rem; /* 字体大小为 1.5 倍根元素字体大小 */
}
```

1.5.2 相对单位（Relative Units）

相对单位是根据某些其他值来计算的，它们比绝对单位更灵活。常见的相对单位有：

%（百分比）
- % 是一个相对单位，表示相对于父元素或容器的百分比大小。
- 适用场景：常用于布局（如宽度、高度）和响应式设计，确保元素随父元素的大小调整。
- 例子：
```
div {
  width: 50%; /* 宽度为父元素宽度的一半 */
}
```
vw（视口宽度，Viewport Width）
- vw 是相对于视口（浏览器窗口）宽度的单位，1vw 等于视口宽度的 1%。
- 适用场景：用于响应式设计，使元素根据浏览器窗口的宽度动态调整。
- 例子：
```
div {
  width: 50vw; /* 宽度为视口宽度的 50% */
}
```
vh（视口高度，Viewport Height）
- vh 是相对于视口高度的单位，1vh 等于视口高度的 1%。
- 适用场景：用于设置相对于浏览器高度的元素尺寸。
- 例子：
```
div {
  height: 100vh; /* 高度为视口高度的 100% */
}
```
vmin 和 vmax
- vmin 是视口宽度和高度中较小的那个的 1%，vmax 是视口宽度和高度中较大的那个的 1%。
- 适用场景：在响应式设计中，可以用来基于视口的最小或最大维度来设置尺寸。
- 例子：
```
div {
  width: 10vmin; /* 宽度为视口宽度和高度中较小的那个的 10% */
}
```
ch（字符宽度，Character Width）
- ch 是一个相对单位，用于表示数字 0 字符的宽度。1ch 等于当前字体的字符宽度。
- 适用场景：在排版中，可以用于设置基于字符宽度的布局。
- 例子：
```
div {
  width: 20ch; /* 宽度为 20 个字符宽度 */
}
```

1.5.3 其他常见单位

ex（x-height，字形的高度）
- ex 是相对于当前字体的 x 高（字形的高度，即小写字母 x 的高度）来设置的单位。它较少使用。
- 例子：
```
div {
  height: 10ex; /* 高度为当前字体的 10 倍 x 高 */
}
```
ch（字符宽度）
- ch 单位代表当前字体的字符宽度，通常以数字 0 为基准，1ch 相当于该字体中数字 0 的宽度。适用于基于字符宽度来布局。
- 例子：
```
input {
  width: 20ch; /* 宽度为 20 个字符 */
}
```

1.5.4 使用场景和最佳实践

固定尺寸：
- 使用 px 和 pt 等绝对单位，适合需要固定元素大小的场景，比如按钮、图标等。
响应式设计：
- 使用 em、rem、%、vw 和 vh 等相对单位，能够根据视口或父元素的变化自动调整尺寸，适合响应式布局。
字体和排版：
- 对于字体大小和行高等，推荐使用 em 或 rem，以便让文字和布局更加灵活，适应不同的屏幕和设备。
布局和空间：
- 使用 vw、vh、% 等单位来创建自适应的布局，确保页面在不同大小的屏幕上都能正常显示。

总结

CSS 中有两类常用的单位：绝对单位和相对单位。绝对单位如 px 和 pt 适用于固定大小的场景，而相对单位如 em、rem 和 % 更适用于响应式设计和动态调整的布局。理解不同单位的特点和使用场景，有助于开发者创建更加灵活和可维护的网页布局。

#前端开发分享于 2025-03-05

上一篇：1.4 选择器与优先级下一篇：1.6 颜色和渐变