box-sizing: border-box 能防止元素撑破容器，因其使 width 包含 padding 和 border，避免总宽超限；现代浏览器均支持，建议全局重置 * { box-sizing: border-box; }。
box-sizing: border-box 为什么能防止元素撑破容器
默认情况下，width 只控制内容区宽度，加上 padding 和 border 后总宽就超了父容器。比如设 width: 100%、padding: 10px，实际占满后还会多出 20px，导致横向滚动或换行错乱。
用 box-sizing: border-box 后，width 指的是「边框内沿到边框内沿」的总宽，padding 和 border 被挤进这个范围内，不再额外扩张。
- 所有现代浏览器都支持，IE8+ 兼容
- 建议全局重置：
* { box-sizing: border-box; }，避免漏写 - 注意：重置后，如果旧代码依赖 content-box 行为（比如手动计算减去 padding），会出错
flex 布局中 width 百分比失效？先看 flex-basis
在 display: flex 容器里，子项的 width 常被 flex-basis 覆盖。即使写了 width: 50%，若没设 flex: 0 0 auto 或显式 flex-basis，它可能被拉伸或压缩。
真正控制自适应宽度的，是 flex-basis 的值——它可以是 auto、固定值，也可以是百分比（需父容器有明确宽度）。
- 想让子项严格按百分比占位：
flex: 0 0 50%（等价于flex-basis: 50%+ 禁止伸缩） - 如果父容器宽度不固定（如
max-width但无width），百分比flex-basis可能计算为 0，此时改用flex: 1更稳妥 -
box-sizing依然要设，否则padding会让 flex 项内部溢出
input、textarea 等表单控件为啥特别容易撑破
表单元素有浏览器默认 box-sizing: content-box，且自带 border 和 padding（尤其 Chrome 的 input 默认有 padding: 1px 6px）。直接写 width: 100% 几乎必出问题。
- 必须显式声明：
input, textarea { box-sizing: border-box; } - 不要只靠
width: 100%，加max-width: 100%防极端窄屏下文字溢出 - 某些 UI 库（如 Bootstrap）已重置，但自定义样式时容易漏掉——检查 computed styles 里的
box-sizing值最准 - 移动端键盘弹出时，viewport 缩放可能临时改变计算逻辑，
min-width: 0有时能辅助修复
rem/vw 布局下 box-sizing 还重要吗
重要，而且更隐蔽。用 vw 设 width（如 width: 90vw）看起来不会撑破，但一旦加了 padding 或 border，总宽就变成 90vw + 2×padding，超出视口照样滚动。
同理，rem 基于根字体大小，数值再“响应式”，叠加后仍可能突破容器边界。
-
box-sizing: border-box是兜底手段，和单位无关 - 用
calc()手动减法（如width: calc(100% - 20px)）可行，但维护成本高，不如统一border-box - 嵌套 flex + rem + padding 的场景最容易忽略：外层 flex 分配空间，内层又因 content-box 多出像素，错位一两像素都可能引发换行或截断
真正麻烦的不是写法，是调试时盯着 DevTools 里 layout tab 看不到那几个像素从哪来——box-sizing 不生效，往往是因为选择器优先级低，或者被 reset.css 里更早的规则覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
