移动端页面不设 box-sizing: border-box 会导致 iOS Safari 或旧版 Android WebView 中 90% 以上出现溢出、换行或错位；因默认 content-box 下 width 不含 padding/border，致实际宽度超限；需全局重置 、::before、*::after 并单独覆盖表单控件。
不是“可选”，而是不设 box-sizing: border-box 的移动端页面，90% 以上会在 iOS Safari 或旧版 Android WebView 中出现不可预测的溢出、换行或错位——尤其当用到 input、textarea 或并排卡片时。
为什么 width: 50% + padding 就会换行？
因为默认 box-sizing: content-box 下，width 只算内容区。加了 padding: 12px 和 border: 1px 后，实际宽度 = 50% + 24px + 2px，超出父容器 100% 容量，浏览器只能折行。
- 两栏布局中，哪怕只有一栏有边框，另一栏也会被挤下去
-
input[type="text"] { width: 100%; padding: 8px; }在 iOS Safari 中必触发横向滚动条 - Flex 项设了
flex: 1还加padding，内容区可能被压缩到负宽度（尤其小屏）
全局重置必须带 *::before 和 *::after
只写 * { box-sizing: border-box; } 是不够的——伪元素（比如 ::after 清浮动、::before 做装饰图标）仍走默认 content-box，悄悄破坏布局。
- 正确写法：
*, *::before, *::after { box-sizing: border-box; } - 这条规则必须放在所有自定义样式之前，否则会被后续声明覆盖
- 前缀如
-webkit-box-sizing和-moz-box-sizing在 2026 年已非必需，但若需兼容 Android 4.3 Webview，可保留
表单控件和第三方库是最大漏网之鱼
box-sizing 不继承，且原生表单控件在不同内核中默认值混乱：Safari 的 input[type="search"] 默认仍是 content-box，Vant 的 van-field 内部 input 若没显式设，就按宿主浏览器默认走。
立即学习“前端免费学习笔记（深入）”；
- 必须单独覆盖：
input, textarea, select, button { box-sizing: border-box; } - Ant Design、NutUI 等库若用了
!important强制content-box，得用更具体选择器覆盖，比如.nut-button { box-sizing: border-box !important; } - 调试时别只看 Styles 面板，要去 Computed 面板确认
width是否已含padding和border
calc() 和 border-box 搭配时最易算错
写了 width: calc(100% - 20px) 并以为是在抵消 padding 或 border？错了。border-box 已经把它们包进 width 里了，这个 20px 应该只用于外边距或间隙预留。
- 常见错误：
width: calc(100% - 16px); padding: 8px;—— 实际内容区被压窄两次 - 正确思路：
width: 100%; padding: 8px;就够了，border-box自动处理 -
box-sizing只管盒子内部尺寸逻辑，不解决margin合并、父容器塌陷等问题，别指望它包治百病
真正容易被忽略的是：Flex/Grid 容器中，width 本身常被忽略，box-sizing 生效但“看不见”——它只影响该元素内部的 padding/border 占位，不改变 flex-basis 或 grid-column 的分配逻辑。
