必须全局启用 box-sizing: border-box 并覆盖伪元素和表单控件，否则移动端窄屏下因 content-box 模式导致 padding/border 叠加撑破屏幕。
移动端布局撑破，不是代码写错了，是浏览器默认用 box-sizing: content-box 算尺寸——你写 width: 100%，再加 padding: 16px，它就真敢给你算出 100% + 32px，窄屏下直接横向滚动。必须全局启用 box-sizing: border-box，且要覆盖伪元素和表单控件，否则等于没设。
为什么移动端特别容易撑破
屏幕越窄，几像素误差越致命。content-box 模式下：width 只管内容区，padding 和 border 全部额外叠加。常见翻车点：
- Flex 容器里两个
width: 50%的按钮，各加padding: 12px→ 实际总宽超 100%，第二项换行 -
input加了padding: 14px后横向滚动条意外出现（尤其 iOS Safari） - 响应式断点用
calc(50% - 10px)配合内边距，结果在 375px 屏上仍溢出 2px - 父容器
padding: 0 16px，子项width: 100%+ 自身padding: 12px→ 内容区只剩 323px，但总宽冲到 347px
*, *::before, *::after 必须一起写
伪元素不继承 box-sizing，默认仍是 content-box。你只写 * { box-sizing: border-box; }，但 ::before 画的下拉箭头、遮罩层或清除浮动的空块，依然按“内容宽 + padding + border”计算，悄悄撑开 2px，导致定位偏移或换行。
正确写法（且必须放在所有自定义样式之前）：
*, *::before, *::after {
box-sizing: border-box;
}
注意：
- 顺序不能错：必须在第三方 UI 库（如 Vant、Element Plus）的 CSS 之后 引入，否则被覆盖
- IE8 不支持
::before写法，若需兼容，补一行*:before, *:after（单冒号） - 某些 scoped style 或 Shadow DOM 会隔离这条规则，得用更具体选择器覆盖
表单控件必须单独加固
input、textarea、select 在不同浏览器中默认值不一致：input[type="search"] 在 Safari 中默认是 content-box，哪怕父级设了 border-box 也不生效；部分安卓 WebView 中 textarea 仍回退为 content-box。
实操建议：
- 显式声明，不依赖继承：
input, textarea, select, button { box-sizing: border-box; } - 旧版 Safari（≤12）和部分 Android WebView 建议加
-webkit-appearance: none缓解渲染异常 - 检查 DevTools 的 “Computed” 面板，确认目标元素的
box-sizing值确实是border-box，别信代码写了就生效
即使用了 border-box，这些地方照样撑破
box-sizing: border-box 解决的是 width/height 与 padding/border 的关系，但它不自动处理以下行为：
-
flex子项默认min-width: auto，长文本或图片会顶破容器 → 必须加min-width: 0 -
img、iframe是替换元素，无视width→ 得配max-width: 100%和height: auto -
max-width和min-width同样走border-box规则，很多人只改width，结果max-width: 400px还是被 padding 推爆 - 表格（
table）完全无视box-sizing→ 得靠table-layout: fixed+width: 100%
真正容易被忽略的是：撑破源头往往不是 width，而是 min-width 行为、替换元素未约束、或伪元素漏掉 —— 查问题时先盯死这几个点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
