在学习 CSS 时，了解各种单位的使用和区别非常重要。以下是几种常见的单位及其特点、使用场景和区别。
1. PX（像素）
定义：PX 是一个绝对单位，用于指定元素的固定大小，单位长度是固定的。
特点：不会随父元素或视口的变化而变化，始终保持一致。适用于需要精准控制尺寸的场景。
使用场景：通常用于固定尺寸的布局、边距、内边距等。
例子：
div {
width: 200px;
height: 100px;
}
2. 百分比（%）
定义：百分比是一个相对单位，是相对于其父元素的宽度或高度进行计算的。
特点：百分比值是相对于父元素的大小计算的。常用于流式布局、居中对齐等。
使用场景：布局设计中，尤其是动态尺寸的元素，或用来实现元素相对于父元素的定位。
例子：
.container {
width: 100%; /* 相对于父元素宽度的 100% */
height: 50%; /* 相对于父元素高度的 50% */
}
.box {
width: 50%; /* 相对于父元素宽度的 50% */
margin-left: 25%; /* 使得元素居中 */
}
常见问题：
百分比会相对于父元素的尺寸，而不是自身的尺寸。例如，在用
left和top设置元素居中时，50% 是指相对于父元素宽度和高度的 50%。
3. EM
定义：EM 是相对于当前元素的字体大小（
font-size）进行计算的。特点：一个元素的大小是基于其父元素或自身的
font-size。如果没有设置font-size，则继承父元素的值。使用场景：适用于字体大小、间距等，希望能相对调整的地方。
例子：
div {
font-size: 2em; /* 基于父元素的 font-size 计算 */
}
补充：
如果父元素的
font-size是 20px，那么子元素的font-size将是40px（2 * 20px）。
4. REM（Root EM）
定义：REM 是相对于根元素（
html标签）的字体大小来计算的，通常是html元素的font-size。特点：与 EM 不同，REM 始终以根元素的
font-size为基础。它不受父元素font-size影响，便于进行响应式设计。使用场景：适用于响应式布局中，确保尺寸的一致性，避免继承问题。
例子：
html {
font-size: 16px; /* 1rem = 16px */
}
div {
font-size: 2rem; /* 2 * 16px = 32px */
}
5. VW 和 VH（视口宽度与视口高度）
定义：VW 是视口宽度的 1%，VH 是视口高度的 1%。
特点：它们是相对于视口尺寸的单位。视口宽度（VW）和视口高度（VH）会随着浏览器窗口的变化而变化，因此非常适合响应式设计。
使用场景：适用于基于视口尺寸调整的布局，比如全屏背景、全宽或全高元素。
例子：
div {
width: 50vw; /* 宽度是视口宽度的 50% */
height: 20vh; /* 高度是视口高度的 20% */
}
Vmin 和 Vmax：
Vmin：是 VW 和 VH 中较小的一个值。
Vmax：是 VW 和 VH 中较大的一个值。
比较不同单位的使用场景
| 单位 | 类型 | 特点 | 使用场景 |
|---|---|---|---|
| PX | 绝对单位 | 固定值，固定大小 | 精确控制尺寸，不受父元素或视口变化的影响。 |
| % | 相对单位 | 相对于父元素宽度/高度的比例 | 流式布局、居中对齐等。 |
| EM | 相对单位 | 相对于当前元素的 font-size | 调整字体、间距等，且继承父元素的字体大小。 |
| REM | 相对单位 | 相对于根元素（html）的 font-size | 响应式设计、避免继承问题，确保一致性。 |
| VW | 相对单位 | 视口宽度的百分比 | 自适应布局，根据浏览器窗口的宽度进行调整。 |
| VH | 相对单位 | 视口高度的百分比 | 自适应布局，根据浏览器窗口的高度进行调整。 |
| Vmin | 相对单位 | 取 VW 和 VH 中较小的值 | 在长宽不等的屏幕中，确保元素自适应调整。 |
| Vmax | 相对单位 | 取 VW 和 VH 中较大的值 | 保证元素在宽度或高度较大的情况下不被压缩。 |
总结与实践建议
掌握基本概念：理解每个单位的定义和应用场景是掌握 CSS 的基础。
选择合适的单位：根据设计需求选择合适的单位，避免盲目使用固定单位（如 PX），而忽略了响应式设计。
结合实际使用：通过实际项目中的布局需求来练习和应用这些单位，逐步加深理解。