box-sizing: border-box 能解决“设了 width 却撑出父容器”的问题，因为它将 width/height 定义为盒子总宽高，自动将 padding 和 border 计入其中，避免内容区+内边距+边框导致的溢出。
box-sizing: border-box 为什么能解决“设了 width 却撑出父容器”的问题
因为默认的 box-sizing: content-box 把 width 和 height 理解成“内容区尺寸”，边框和内边距额外加在上面。你写 width: 200px; padding: 10px; border: 1px solid，实际占宽是 222px —— 这就是布局错位、换行、溢出的根源。
设成 border-box 后，width 指的是“整个盒子总宽”，浏览器自动把 padding 和 border 往里缩，内容区变窄，但整体尺寸可控。
- 所有现代浏览器都支持，IE8+ 完全兼容
- 不改变盒模型逻辑，只改尺寸归属定义，无副作用
- 对表单控件（如
<input>、<textarea></textarea>）影响明显：它们默认是content-box，常导致横向滚动或截断
全局设置时，哪些元素要特别注意重置
用 * { box-sizing: border-box; } 最省事，但有例外：
-
<textarea></textarea>在部分旧版 Safari 中会因resize行为异常，建议单独加resize: both;或限制宽高 - 第三方 UI 库（如 Bootstrap 4+ 已内置，但 v3 没有）可能没适配，若发现组件尺寸突变，检查是否被全局覆盖又没重置
-
iframe、canvas、video等替换元素不受影响，无需处理
稳妥做法是：*, *::before, *::after { box-sizing: border-box; }，再针对 textarea 补一句 textarea { resize: vertical; } 防止意外拉伸。
立即学习“前端免费学习笔记（深入）”；
Flex/Grid 布局里，box-sizing 不设会出什么具体问题
Flex 项或 Grid 单元格如果用 content-box，哪怕写了 flex: 1 或 grid-column: span 2，只要带 padding 或 border，就可能突破分配空间，触发 flex-shrink 强制压缩，或让 grid track 被撑大。
- 典型现象：两列等宽布局，右边列莫名比左边窄；或设置了
min-width: 0才不溢出 - Grid 中
fr单位计算基于轨道净尺寸，content-box下的 padding/border 会吃掉本该给内容的空间 - 修复成本低：加一行
box-sizing: border-box，比反复调min-width、overflow、flex-basis快得多
要不要在 CSS 重置里删掉 box-sizing 声明
不要删。即使用了 modern-normalize 或 reset.css，它们大多不设 box-sizing —— 这不是“重置”范畴，而是“行为约定”。CSS 重置的目标是消除浏览器差异，而 box-sizing 是开发者主动选择的尺寸模型。
- PostCSS 插件如
postcss-normalize默认不包含box-sizing，需手动加 - Tailwind 默认开启
border-box，说明它已是现代 CSS 的事实标准 - 唯一可删的情况：维护一个必须兼容 IE7 的古董系统（但那也不该用 CSS3 布局）
真正容易被忽略的是：动态插入的 DOM（比如 JS 创建的 <div>）不会继承父级 <code>box-sizing，它靠的是全局通配符或继承链 —— 所以通配符那行不能少，也不能只写在某个局部 scope 里。
