px、em、rem、%、vw/vh等CSS单位计算基准各不相同：px为绝对像素；em相对父元素font-size，嵌套易失控；rem相对根元素font-size，适合响应式；%依属性不同参照父宽或高；vw/vh基于视口，需注意iOS Safari地址栏影响；单位选择应以参照物是否稳定为准。
HTML 样式代码本身不直接“用”，真正起作用的是 style 属性或 <style></style> 标签里的 CSS 规则；新手常把单位写错，不是样式没生效，而是单位理解偏差导致效果反直觉。
px、em、rem 三个最常混的单位怎么选
它们都表示长度，但计算基准完全不同：
-
px是绝对像素单位，1px = 设备一个物理（或逻辑）像素点，缩放时值不变，适合固定尺寸控件（如边框、图标大小） -
em相对于父元素的font-size，比如父元素是16px，子元素写1.5em就等于24px；嵌套多层时会逐级相乘，容易失控 -
rem相对于根元素（html）的font-size，只要根字号设好（如html { font-size: 16px; }），所有rem都按此计算，响应式布局首选
常见错误：font-size: 16em; 写在 body 里，结果字体大到撑爆屏幕——因为它是相对于 html 默认 16px 的 16 倍，即 256px。
百分比（%）到底参照谁
不是统一参照父容器宽度，要看具体 CSS 属性：
立即学习“前端免费学习笔记（深入）”；
-
width、height、padding、margin：水平方向（left/right、width、padding-left等）百分比参照父容器width；垂直方向（top/bottom、height、padding-top）在非position: absolute下也参照父width（这是很多人踩坑的点） -
top、bottom、left、right在position: absolute或fixed下，才分别参照包含块的宽/高 -
font-size: 120%参照父元素的font-size，等价于1.2em
典型问题：height: 50% 在子元素上没效果？大概率是因为父容器没设 height，百分比失去计算依据。
vw/vh 和视口单位的实际限制
vw（viewport width）、vh（viewport height）以视口为 100 单位，1vw = 视口宽度的 1%，1vh = 视口高度的 1%：
- 适合全屏背景、视差滚动、适配刘海屏/全面屏高度（如
min-height: 100vh） - 注意：
100vh包含地址栏，iOS Safari 滚动时视口高度会变，可能导致内容被遮挡；更稳的做法是用dvh（dynamic viewport height），但需检查兼容性（Chrome 105+、Safari 16.4+） -
vmax和vmin分别取宽高中较大/较小值的 1%，做等比缩放图标或卡片很实用
示例：font-size: 4vmin; 表示字体大小始终是视口短边的 4%，在横竖屏切换时自动缩放，但小屏下可能过小，建议加 min-font-size 限制。
单位不是越新越好，也不是越“相对”就越高级；px 依然在 border、icon、精确对齐场景不可替代，而 rem + 媒体查询才是大多数响应式项目的实际落地组合。真正容易被忽略的，是单位背后那个“参照物”是否真的存在、是否被重置、是否随交互动态变化。
