在 CSS 中，常用的布局单位包括哪些？请列举并简要说明各自的特点。

回答思路

1. 【回答框架 1】CSS 布局单位主要分为绝对单位和相对单位。绝对单位如 px，是固定大小，不受父元素或视口影响，适合精确控制；相对单位则根据其他值动态计算。
2. 【回答框架 2】相对单位中，em 相对于当前元素的字体尺寸，常用于设置 padding、margin 等；rem 相对于根元素（html）的字体尺寸，便于整体统一缩放，适合响应式布局。
3. 【回答框架 3】视口单位包括 vw（视口宽度百分比）、vh（视口高度百分比）、vmin（取视口宽高中较小者）、vmax（取较大者），适用于全屏或等比例适配。
4. 【回答框架 4】百分比单位相对于父元素的对应属性，如宽度、高度、字体等，但相对于字体时可能表现不同，需注意基准。
5. 【回答框架 5】此外还有 fr 用于网格布局中分配剩余空间，auto 等灵活值，但核心是掌握 px、em、rem、vw/vh 和百分比。
6. 【关键点 1】px 是固定单位，不随父元素变化。
7. 【关键点 2】em 相对于当前元素，可嵌套导致累积变化；rem 相对于根元素，避免累积。
8. 【关键点 3】vw/vh 直接对应视口尺寸，适合全屏布局。
9. 【关键点 4】百分比相对于父元素的对应属性，需明确基准。
10. 【易错点 1】混淆 em 与 rem：em 基于当前元素字体，可能因嵌套导致意料之外的大小。
11. 【易错点 2】视口单位在移动端可能引发误差，需考虑滚动条宽度等因素。
12. 【易错点 3】百分比对于 height 的基准可能不生效，当父元素高度未显式设置时。