知识篇 -- CSS单位：度量网页元素的尺寸与距离

Ray Shine 2023/11/11 CSS核心概念

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

在CSS中，单位是用来表示长度、大小、时间、角度等数值的。正确选择和使用单位对于实现精确布局、响应式设计和保持可维护性至关重要。CSS单位主要分为两大类：绝对单位 和 相对单位。

# 一、绝对单位：固定不变的度量

绝对单位的特点是其值是固定的，不会受到其他元素或视口大小的影响。它们在任何情况下都表示相同的物理尺寸。

# 1. `px` (像素)

定义：px 是最常用的绝对单位，表示屏幕上的一个点（像素）。
特点：
- 精确控制：提供像素级别的精确控制。
- 固定大小：在不同设备上，一个 px 的物理大小可能不同（取决于设备的DPI），但在CSS渲染中，它是一个固定的逻辑像素。
何时使用：
- 需要精确控制元素尺寸，且不希望其随环境变化时。
- 例如，边框的宽度、小图标的尺寸等。
示例：
```
.element {
    width: 100px;
    height: 50px;
    border: 1px solid black;
}
```
思考：虽然 px 简单直观，但在响应式设计中，过度使用 px 可能会导致元素在不同屏幕尺寸下显示不佳。

# 二、相对单位：灵活适应的度量

相对单位的特点是其值是相对于其他某个量（如父元素的字体大小、根元素的字体大小、视口大小等）来计算的。这使得它们在响应式设计中非常有用，能够更好地适应不同的屏幕尺寸和用户偏好。

# 1. `em` (相对于父元素的字体大小)

定义：1em 等于当前元素的字体大小。如果当前元素没有设置字体大小，则继承父元素的字体大小。
特点：
- 层层继承：em 的值会受到父元素字体大小的影响，导致计算复杂。
- 相对性：当父元素字体大小改变时，使用 em 的子元素也会相应改变。
何时使用：
- 在组件内部，希望子元素的尺寸与父元素的字体大小保持比例时。
- 例如，行高 (line-height)、文本缩进 (text-indent)。

示例：

<div style="font-size: 16px;">
    父元素
    <p style="font-size: 1.5em;">子元素字体大小是父元素的1.5倍 (16px * 1.5 = 24px)</p>
    <span style="padding: 0.5em;">子元素内边距是自身字体大小的0.5倍 (24px * 0.5 = 12px)</span>
</div>

思考：em 的嵌套计算可能会变得复杂，尤其是在多层嵌套的元素中。

# 2. `rem` (相对于根元素的字体大小)

定义：1rem 等于根元素（<html>）的字体大小。
特点：
- 全局控制：只受根元素字体大小的影响，避免了 em 的层层继承问题。
- 响应式基础：通过调整根元素的字体大小，可以实现页面所有文本和相关尺寸的等比例缩放。
何时使用：
- 实现全局字体大小调整和响应式布局。
- 例如，大部分元素的字体大小、间距、组件尺寸等。

示例：

<html style="font-size: 16px;">
<body>
    <div style="font-size: 1.2rem;">这个div的字体大小是16px * 1.2 = 19.2px</div>
    <p style="margin-top: 1rem;">这个p的顶部外边距是16px</p>
</body>
</html>

思考：rem 是响应式设计中非常推荐的单位，因为它提供了一个统一的基准。

# 3. `vh` (Viewport Height) 和 `vw` (Viewport Width)

定义：
- 1vh 等于视口高度的 1%。
- 1vw 等于视口宽度的 1%。
特点：
- 完全响应式：直接与浏览器视口的大小挂钩，无论设备屏幕大小如何，都能保持相对比例。
何时使用：
- 需要元素尺寸与视口大小直接关联时。
- 例如，全屏背景图、视口高度的导航栏、响应式字体大小等。

示例：

.full-screen-section {
    width: 100vw;
    height: 100vh; /* 占据整个视口 */
}
h1 {
    font-size: 5vw; /* 字体大小随视口宽度变化 */
}

思考：vh 和 vw 在某些情况下可能会导致元素过大或过小，需要结合其他单位或媒体查询使用。

# 4. `%` (百分比)

定义：相对于父元素的尺寸。
特点：
- 相对父元素：width 和 height 的百分比是相对于父元素的 width 和 height。
- padding 和 margin 的百分比：垂直方向的 padding 和 margin 百分比是相对于父元素的宽度来计算的。
何时使用：
- 需要元素尺寸与父元素尺寸保持比例时。
- 例如，流式布局中的列宽。

示例：

<div style="width: 500px; height: 200px; background-color: lightgray;">
    <div style="width: 50%; height: 50%; background-color: lightblue;">
        子元素
    </div>
</div>

效果：子元素的宽度是 500px * 50% = 250px，高度是 200px * 50% = 100px。

# 5. `ch` (字符单位) 和 `ex` (x-height)

ch (character unit)：
- 定义：通常等于元素字体中“0”字符的宽度。
- 何时使用：在需要基于字符宽度进行排版时，例如固定宽度文本输入框。
ex (x-height)：
- 定义：通常等于元素字体中“x”字符的高度（小写字母x的高度）。
- 何时使用：在需要基于字体的小写字母高度进行排版时。

# 三、单位选择的策略

全局尺寸：对于全局的字体大小、间距等，优先考虑 rem，通过调整 html 的 font-size 来实现整体缩放。
组件内部：在组件内部，如果希望尺寸与组件自身的字体大小相关，可以使用 em。
视口相关：对于需要与视口大小直接关联的元素，使用 vh 和 vw。
精确控制：对于不需要响应式变化，且需要像素级精确的场景，可以使用 px。
流式布局：对于需要根据父元素宽度自适应的布局，使用 %。

通过灵活组合和运用这些CSS单位，可以构建出既精确又具有良好响应性的网页布局。

← 定位颜色 →

一ξひβθ光 i