混用 px、em、rem、% 会导致布局错位，因它们基准不同：px 是绝对像素，rem 依赖根元素 font-size，em 依赖父字体大小，% 依赖父容器尺寸；嵌套或动态修改时偏差层层叠加。
为什么混用 px、em、rem、% 会直接导致布局错位
因为这些单位的计算基准完全不同：px 是绝对像素，rem 依赖根元素 font-size，em 依赖父元素字体大小，% 依赖父容器尺寸。一旦嵌套层级变深或全局字体被动态修改（比如用户缩放、主题切换），em 和 % 就会层层叠加偏差，rem 若根字号没对齐设计稿基准（如没设 html { font-size: 16px; }），所有基于它的尺寸都会偏移。
统一用 px 还是 rem？看这三点再决定
不是“统一就好”，而是要匹配项目实际约束：
-
px更适合：组件库、工具类小项目、需要精确像素控制的动画/边框/图标；缺点是无法响应式缩放，不兼容系统字体放大设置 -
rem更适合：中后台或 ToC 页面，尤其需适配移动端或支持无障碍字体放大的场景；前提是必须固定根字号（如html { font-size: 16px; }），且所有设计稿按 16px 基准出图 - 混合使用可接受但有边界：仅限
rem控制大块布局（width、padding、font-size），px用于无法缩放的细节（border、box-shadow、background-position）
快速检查并批量修正单位混乱的 CSS
用浏览器开发者工具定位问题最直接：选中错位元素 → 看 Computed 面板里各属性最终计算值，对比预期值。若发现 margin 显示 1.25em 却算成了 20px（而你期望是 16px），说明父级字体异常；若 font-size 显示 0.875rem 却是 12px，说明根字号不是 16px。
批量修正建议：
立即学习“前端免费学习笔记（深入）”；
- 全局搜索替换
em→rem（仅当确认无深层嵌套依赖父级字体时） - 把所有
%宽高替换成rem或flex/grid布局（百分比在 flex 容器里行为易误判） - 用 PostCSS 插件
postcss-pxtorem自动转换，但注意配置rootValue必须与 HTML 根字体一致（如16）
一个典型错位案例和修复代码
常见现象：按钮文字垂直居中失效，实际是 padding: 0.5em 1em; 在父容器 font-size: 14px; 下算出上下 padding 不等（em 基于行高而非固定值），导致视觉偏移。
/* 错误写法 —— 混用 em 且未锁定基准 */
.button {
padding: 0.5em 1em;
font-size: 0.875em; /* 又一层 em，放大缩小全乱 */
}
/ 正确写法 —— 统一 rem + 固定根字号 /
html {
font-size: 16px; / 强制基准 /
}
.button {
padding: 0.5rem 1rem; / 所有 rem 都按 16px 算 /
font-size: 0.875rem; / = 14px，稳定可预期 /
}
真正难的不是换单位，而是确保整个项目从 html 到最深子组件，没有一处意外修改了 font-size 或启用了 text-size-adjust —— 这些才是隐藏最深的错位源头。
