box-sizing: border-box 是唯一可靠解法，它使 width 包含 padding 和 border，避免子元素因 padding 撑破父容器；需全局通配重置 、::before、*::after，否则子元素仍按 content-box 计算。
box-sizing: border-box 是唯一可靠解法，不加它，任何 padding 都可能让子元素视觉上“撑破”父容器——这不是 bug，是 content-box 的默认行为。
为什么 padding 会让子元素“溢出”
默认 box-sizing: content-box 下，width: 100% 只算内容区，padding: 20px 和 border: 1px 会额外叠加在外部。比如父容器宽 400px，子元素设 width: 100%; padding: 20px，实际占宽就是 442px，必然横向溢出。
常见错误现象包括：max-width: 100% 失效、滚动条意外出现、flex 子项错位、表单控件挤出卡片边界。
- 这个计算逻辑对所有块级元素生效，包括
div、input、button、伪元素::before/::after - 即使父容器设了
box-sizing: border-box，子元素若没继承或重置，仍按content-box算 -
flex或grid容器本身不改变子元素的box-sizing，该问题照常发生
必须全局设置，不能只写一次
只给某个卡片类（如 .card）加 box-sizing: border-box 没用——它的子元素（比如 .card-header 或 input）依然走默认 content-box，padding 还是往外叠。
正确做法是用通配重置：
*, *::before, *::after {
box-sizing: border-box;
}
这个规则覆盖所有元素及伪元素，避免嵌套时尺寸计算错乱。
- 别用
html { box-sizing: border-box }，它不继承，子元素照样是content-box - 如果项目用了第三方 UI 库，检查其 reset.css 是否漏掉了
::before/::after - 某些旧版框架（如 Bootstrap 3）默认没重置伪元素，要手动补上
box-sizing 解决不了的例外情况
box-sizing: border-box 只改尺寸计算方式，对以下场景无直接作用：
-
img、svg、iframe等替换元素：必须额外加max-width: 100%和height: auto -
flex子项含固有最小宽度（如长 URL、连续英文、input）：需配合min-width: 0才能收缩 -
table元素：无视max-width和box-sizing，得用table-layout: fixed+width: 100% -
white-space: nowrap文本：需配overflow: hidden+text-overflow: ellipsis，且确保父容器有明确宽度约束
最容易被忽略的是：当你在 DevTools 里看到子元素 width 显示“400px”，父容器也标着“400px”，却仍有横向滚动条——大概率是某个未重置 box-sizing 的伪元素或第三方组件悄悄加了 padding。查的时候别只盯 visible 元素，得展开 ::before 看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
