必须全局设置 、::before、*::after 的 box-sizing: border-box 才有效，仅设父容器无效，因子元素默认 content-box 仍会撑破布局；还需配合 max-width、min-width: 0、table-layout 等处理内容溢出。
直接加 box-sizing: border-box 能解决，但只加在父容器或个别元素上基本没用——必须覆盖所有元素及其伪元素，否则子元素仍按 content-box 计算，padding 和 border 还是会往外叠。
为什么只给父容器设 box-sizing: border-box 无效
父容器的 box-sizing 只影响它自己，不影响子元素。子元素（比如 input、.card-header、textarea）默认仍是 content-box。一旦它们有 padding: 12px 和 border: 1px，再写 width: 100%，实际宽度就是 100% + 24px + 2px，必然撑破父容器。
- 常见错误现象：卡片标题文字被切掉、表单输入框小屏下横向滚动、Flex 容器里按钮被挤到下一行
-
html, body { box-sizing: border-box }不行——它不继承，子元素照样是content-box - 漏掉
::before或::after也会出问题，它们常被用于清除浮动或装饰，没设border-box就可能悄悄撑开布局
真正起效的写法只有这一种
必须一次性覆盖全部元素和伪元素：
*, *::before, *::after {
box-sizing: border-box;
}
这个规则要放在 CSS 文件最前面，或 中最早加载的位置，避免被 Bootstrap、Ant Design 等第三方库覆盖。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 老项目不敢动全局？优先加在高频出问题的选择器上：
input、textarea、select、.form-group > *、.card-content - 某些框架自己重写了
box-sizing，但没包含伪元素，导致部分组件仍溢出——得手动补全 - 微信 X5 内核（v3.7 以下）对
*::before, *::after支持不稳定，可兜底加一句html { box-sizing: border-box; }
box-sizing: border-box 解决不了的问题
它只改尺寸计算逻辑，不约束内容本身是否溢出。以下情况即使开了 border-box，仍需额外处理：
-
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或word-break: break-word
改完不验证等于没改
别只信代码写了，要进浏览器开发者工具「Computed」面板确认目标元素的 box-sizing 值确实是 border-box。常见失效原因：
- 其他样式规则优先级更高，覆盖了你的
box-sizing - CSS-in-JS 库（如 styled-components）SSR 注入顺序错乱，首屏闪动
- 某些框架（如早期 Bootstrap 3）已内置类似重置，重复设置可能干扰其内部计算
最常被忽略的是：不是所有“溢出”都该靠 box-sizing 解决——它只管尺寸定义方式，不管内容本身会不会撑开边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
