px、em、rem、%、vw/vh等CSS单位计算基准各不相同：px为绝对像素；em相对父元素font-size，嵌套易失控；rem相对根元素font-size，适合响应式；%依属性不同参照父宽或高；vw/vh基于视口，需注意iOS Safari地址栏影响；单位选择应以参照物是否稳定为准。
HTML 样式代码本身不直接“用”，真正起作用的是 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 属性：
立即学习“前端免费学习笔记（深入）”；
