必须同时声明 、::before、*::after 的 box-sizing: border-box，否则伪元素、表单控件及第三方组件仍按 content-box 计算，导致宽度错位、横向滚动、JS 测量偏差等问题。
必须写全 *, *::before, *::after 的 box-sizing: border-box，否则伪元素、表单控件、第三方组件仍按 content-box 计算，错位照常发生。
为什么只写 * { box-sizing: border-box } 不够用
伪元素（如 button::after 下拉箭头）、input、textarea 在 Safari 和多数安卓 WebView 中不继承父级 box-sizing；它们默认仍是 content-box，导致你写的 width: 21.25rem（对应设计稿 340px 总宽）实际只占内容区，padding + border 额外撑出容器——横向滚动条悄悄出现，JS 读取的 getBoundingClientRect().width 比预期大 2–16px。
-
*::before和*::after必须显式声明，否则清除浮动、图标遮罩等都可能“多占空间” -
input,textarea,select要单独加规则，尤其input[type="search"]在 Safari 中长期保持content-box - Vant、NutUI 等库内部常用
!important回设content-box，得用更具体选择器覆盖，例如input.van-field__control { box-sizing: border-box !important; }
第三方组件和 Shadow DOM 中的盒模型失效
React 组件、Web Component 或使用 shadowRoot 的自定义元素，其样式完全隔离。你在全局 CSS 里写的 box-sizing 对它们无效。
- 在组件级 CSS 中重复声明
*, *::before, *::after { box-sizing: border-box; } - 若无法修改组件源码，用
:host或::slotted(*)尝试穿透（但兼容性有限，iOS Safari ≤16.4 不支持::slotted） - 微信 X5 内核偶尔忽略通配符，建议把该规则拆到基础重置 CSS 的第一行，且不嵌套在
@supports或媒体查询中
旧版 WebView 兼容性兜底策略
安卓 WebView 4.3 及更早版本根本不识别 box-sizing；写了等于白写。这时候不能靠“降级样式”，得绕过盒模型解析本身。
立即学习“前端免费学习笔记（深入）”；
- 对关键控件（按钮、输入框）手动用
calc()扣掉内边距和边框：width: calc(100% - 16px); /* 假设 padding: 8px + border: 1px*2 */ - 避免在 flex 子项上同时写
width和flex-basis，旧内核会优先按width渲染，导致box-sizing失效 - 不要依赖
min-width防撑裂——它在 content-box 下计算的是内容区宽度，仍会溢出；改用min-width: 0+overflow: hidden更可靠
flex/grid 容器中子项的盒模型连带影响
Flex 和 Grid 并不跳过盒模型；子项的 box-sizing 直接决定空间分配逻辑。一个没设 border-box 的 flex: 1 按钮，它的 flex-basis 是内容宽，加上 padding: 12px 后实际占位变大，多列就宽度不均。
- 所有 flex 容器的直接子项、grid 容器的直接子项，都应显式确保
box-sizing: border-box - 别在 flex item 上同时用
width: 100%和padding——这会让它强行占满轨道，无视gap或其他 flex 规则 - 用
min-width: 0配合overflow: hidden防止长文本撑裂轨道，这是比word-break更底层的控制点
真正卡住的不是 box-sizing 本身，而是它没统一时引发的重排、横向滚动、软键盘遮挡——这些才是真机上“突然偏移”的源头。检查 computed 样式里的 width 和 border-box width 是否一致，不一致就说明某处漏了声明，哪怕只漏一个 input，整个 rem 布局就和设计稿脱节了。
