必须写全, ::before, *::after { box-sizing: border-box; }并显式设置表单控件，否则伪元素和input等仍按content-box计算，导致布局错乱与js尺寸读取偏差。
移动端适配的盒子模型偏差，根源不是设备差异，而是默认 content-box 让 width 和 padding、border 叠加溢出——全局设 box-sizing: border-box 是必须动作，但只写 * 就收工，90% 的布局错位会照常发生。
为什么 * { box-sizing: border-box } 不够用
伪元素和表单控件是两大漏网之鱼。你写了 *，但 ::before 画的下拉箭头、遮罩层、清除浮动的伪元素仍按 content-box 算尺寸；input、textarea 在 Safari 和部分安卓 WebView 中根本不继承父级设置，哪怕父容器设了 border-box，它们内部依然“撑开”。结果就是：DevTools 里看着没溢出，实际滚动条悄悄出现，或 JS 读取 getBoundingClientRect().width 偏大 2px。
- 必须写全：
*, *::before, *::after { box-sizing: border-box; }，且放在所有 CSS 文件最顶部 -
input、textarea、select需单独加声明，尤其input[type="search"]在 Safari 中默认仍是content-box - 第三方 UI 库（如 Vant、Element Plus）可能用
!important强制回content-box，得用更具体选择器覆盖，例如input.van-field__control { box-sizing: border-box !important; }
box-sizing: border-box 对 flex/grid 布局的影响
Flex 和 Grid 并不绕过盒模型，子项的 box-sizing 直接影响空间分配逻辑。比如一个 flex: 1 的按钮，若没设 border-box，它的 flex-basis 按内容宽计算，加上 padding: 12px 后实际占位变大，导致多列宽度不均；Grid 中 minmax(200px, 1fr) 遇到 border: 2px + content-box，最小宽度就变成 204px，破坏栅格对齐。
- 所有 flex 容器的直接子项、grid 容器的直接子项，都应显式确保
box-sizing: border-box - 避免在 flex item 上同时用
width: 100%和padding—— 这会让它强行占满轨道，无视gap或其他 flex 规则 - 用
min-width: 0配合overflow: hidden防止长文本撑裂 flex 或 grid 轨道
移动端字体大小动态变化时的盒模型连带偏差
用 vw 或 clamp() 动态缩放 font-size 时，line-height 若没同步调整，文字撑开的高度会放大偏差。比如 font-size: clamp(14px, 4vw, 20px) 在 iPhone 横屏下缩到 14px，但 line-height: 20px 还是固定值，导致行高过大、容器莫名变高；而 box-sizing: border-box 对这种内部撑高完全无效。
- 永远用无单位
line-height（如1.5），让它随font-size缩放 - 中英混排场景下，
line-height: 1.5–1.7是安全区间；低于1.4易塌陷，高于1.8易撑裂布局 - 按钮、标签类组件优先靠
padding控制高度，而非依赖line-height撑高 —— 更稳定，也兼容旧引擎 - 测试时打开 Chrome DevTools → Rendering → Show layout shift regions，能直观看到文字区域是否超出预期盒模型边界
真正难处理的不是写一行 box-sizing，而是它要穿透伪元素、穿透 Shadow DOM、穿透第三方组件封装、穿透动态插入的节点——只要漏掉任意一环，偏差就会在某个机型、某个操作路径下突然冒出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
