根本原因是padding在content-box盒模型下额外撑开尺寸，叠加rem小数像素导致视觉偏移；必须全局设置box-sizing:border-box，避免padding溢出，并慎用小数rem值及系统字体缩放影响。
根本原因不是 rem 本身有问题，而是 padding 在默认 content-box 盒模型下会“额外撑开”元素尺寸，而 rem 宽度又依赖根字号动态计算——两者叠加后，小数像素 + 盒模型错配，直接导致视觉偏移。
box-sizing: border-box 必须全局加，否则 padding 就是隐形破坏者
浏览器默认用 content-box：你写 width: 20rem; padding: 1rem;，实际总宽度 = 20rem + 2rem = 22rem。如果根字号是 16px，那这 2rem 就是 32px —— 它不会从 20rem 里扣，而是白加。
- 所有带
padding的容器（按钮、卡片、表单项）必须显式设box-sizing: border-box - 别只在局部加，用通配符一次性兜底：
* { box-sizing: border-box; }（现代项目推荐用modern-normalize替代） - 没加这句时，
width: 100%+padding: 1rem几乎必然溢出父容器，触发横向滚动或换行
rem 计算出的小数 px 会让 padding 渲染失准
比如设计稿 375px 基准，设 html { font-size: 10.666vw; }，在 414px 宽设备上算出根字号 ≈ 44.16px → 1rem = 44.16px，padding: 0.5rem 就是 22.08px。浏览器渲染时四舍五入成 22px 或插值模糊，相邻元素边缘就对不齐，漏出背景色。
- 用
clamp(12px, 10.666vw, 16px)固定根字号下限，避免1rem跌破 12px -
padding值尽量用整数 rem（如0.75rem、1rem），避开0.5rem这类易出亚像素的值 - 真要微调对齐，用
transform: translateX(-0.3px)，别碰margin或padding，它走合成层，精度到 0.1px
background-position 偏移常被误认为布局错位
写了 padding: 20px 后，背景图看起来“右下偏了”，其实是 background-origin 默认为 padding-box，把 0 0 对齐到了内边距区域左上角，离内容区有 20px 距离。
- 图文/按钮等需要背景紧贴文字的场景，必须加
background-origin: content-box - 同时确保该元素已设
box-sizing: border-box，否则content-box基准仍不稳定 - 别用
border-box作background-origin，border 宽度不可控，容易引入新偏移
最易被忽略的是：系统字体缩放会悄悄改掉你的根字号，哪怕写了 font-size: 62.5%，iOS 开启「更大字体」后，1rem 可能变成 15px 而非预期的 10px —— 此时所有基于 rem 的 padding 和宽度都会同比例漂移，且无法用媒体查询捕获。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
