必须同时声明 *, *::before, *::after { box-sizing: border-box; } 于所有CSS最顶部，因伪元素、表单控件及第三方组件常不继承box-sizing，默认content-box导致宽高计算偏差、滚动条和测量错误。
必须写全 *, *::before, *::after 的 box-sizing: border-box，且放在所有 CSS 最顶部——只写 * 或只靠 UI 库重置，90% 的错位仍会发生。
为什么 * { box-sizing: border-box } 不够用
伪元素（如 button::after 下拉箭头）、input、textarea、select 在 Safari 和多数安卓 WebView 中不继承父级 box-sizing，默认仍是 content-box。结果就是：width: 100% 只管内容区，padding 和 border 额外撑出容器，横向滚动条悄无声息出现，getBoundingClientRect().width 比预期大 2–16px。
-
*::before和*::after必须显式声明，否则清浮动、图标遮罩、下拉三角等都会“多占空间” -
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 和 border 后，实际占位就超出轨道。
- 子项写了
width: 100%或min-width: 200px，会无视gap预留，强行撑满轨道 -
gap不是“视觉间隔”，是刚性占位：三列 +gap: 10px→ 扣掉 20px 总宽，再分剩余部分 - 用开发者工具检查
grid-container的 Computedwidth，确认是否为整数；小数宽度（如 799.5px）在 fr 分配时容易舍入偏差
真正麻烦的不是写错一行 CSS，而是漏掉一个伪元素、一个表单控件、一个第三方组件里的局部样式——这些地方一旦走回 content-box，错位就从视觉偏差变成 JS 测量失败、交互偏移、动画卡顿。
