直接加, ::before, *::after { box-sizing: border-box; }可解决绝大多数宽度溢出问题，因box-sizing不继承，仅设父容器无效，子元素及伪元素仍按content-box计算，导致padding/border额外叠加撑破容器。
直接加 *, *::before, *::after { box-sizing: border-box; } 就能解决绝大多数页面宽度溢出问题，但漏掉任一 selector 都可能让 padding/border 悄悄外扩——这不是“加了没用”，而是“没加全”。
为什么只给父容器设 box-sizing: border-box 没用
父容器设了 box-sizing: border-box，只改变它自己的尺寸计算逻辑，对子元素完全无影响。子元素（比如 .input-field、.card-header、甚至伪元素 ::before）默认仍是 content-box。一旦它有 padding: 16px 和 border: 1px，再写 width: 100%，实际宽度就是 100% + 32px + 2px——必然撑破父容器。
常见表现包括：
- 卡片标题文字右侧被切掉
- 表单输入框在小屏下横向溢出，触发滚动条
- Flex 容器里
input和按钮并排时按钮被挤到下一行
box-sizing: border-box 必须全局重置才可靠
必须覆盖所有元素及其伪元素，漏掉任何一个都可能悄悄撑开布局：
*, *::before, *::after {
box-sizing: border-box;
}
注意以下几点：
-
html, body { box-sizing: border-box }不行——box-sizing不继承，子元素仍用默认值 -
*:not(img)这类排除写法不推荐，容易漏掉svg、iframe等关键替换元素的 wrapper - 如果项目用了 Bootstrap 或其他框架，检查它们的重置样式是否包含
::before和::after；没包含的话，组件内部的伪元素仍可能溢出
box-sizing: border-box 解决不了的溢出场景
它只改尺寸计算逻辑，不约束内容本身是否溢出。以下情况即使开了 border-box，仍需额外处理：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
img、svg、iframe：必须加max-width: 100%和height: auto（iframe还要补width: 100%） - Flex 子项中的替换元素（
input、button、textarea）：默认min-width: auto会阻止收缩，得显式写min-width: 0 -
table：无视max-width和box-sizing，得配table-layout: fixed+width: 100% - 带
white-space: nowrap的文本：需要overflow: hidden+text-overflow: ellipsis（且必须配合white-space: nowrap）
Flex 布局中表单控件仍溢出？别忘了 min-width: 0
在 display: flex 容器里，input 默认 min-width: auto，浏览器会优先保内容完整（比如长 URL 或连续无空格字符串），宁可撑破容器也不压缩。只加 box-sizing: border-box 只解决了尺寸计算逻辑，没解除收缩限制。
必须组合生效：
input {
box-sizing: border-box;
min-width: 0;
}
如果希望它占满剩余空间，更彻底的写法是：
input {
flex: 1 1 0;
}
别漏掉 overflow: hidden——它得加在 input 的父容器上（或 input 自身），否则裁剪逻辑不触发。
真正容易被忽略的点不是“要不要加 box-sizing”，而是“加在哪、加全没、加完后内容是否还失控”。伪元素、第三方组件内部、替换元素、Flex 默认收缩策略——这些才是溢出反复出现的根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
