box-sizing: border-box将width定义为“总占位宽度”（含padding和border），内容区自动收缩；content-box下width仅指内容区，padding和border额外叠加导致总宽膨胀。
box-sizing: border-box 怎么改变 width 的含义
它不改变你写的 width 值，而是重新定义这个值代表什么：在 content-box（默认）下，width: 200px 指的是内容区宽度；加了 padding: 10px 和 border: 2px 后，浏览器会额外加上左右各 10px 和 2px，总宽变成 224px。
border-box 下，width: 200px 表示「从左 border 外沿到右 border 外沿」的总宽。padding 和 border 全部被挤进这 200px 里，内容区自动缩为 200 - 2×10 - 2×2 = 176px，总宽永远钉死在 200px。
哪些地方最容易误以为“已经生效”但其实没起作用
常见失效场景不是语法错，而是规则没真正落到目标元素上：
- 只写了
html { box-sizing: border-box; }——box-sizing不继承，子元素不会自动获得 - 第三方库（如旧版 Element Plus 或 Bootstrap 3）的 CSS 在你的样式后加载，把
* { box-sizing: border-box; }覆盖掉了 - 元素有内联样式
style="box-sizing: content-box"—— 内联样式的优先级高于通配符，必须用更具体的选择器覆盖，比如input { box-sizing: border-box !important; } - 用了伪元素但没包含在重置里 —— 正确写法是
* , *::before, *::after { box-sizing: border-box; }
为什么表单控件和图片特别容易翻车
浏览器给 input、textarea、button 默认设了 box-sizing: content-box，还自带 padding（Chrome input 默认 padding: 1px 6px），所以 width: 100% 几乎必然撑破父容器。
立即学习“前端免费学习笔记（深入）”；
图片是替换元素，默认也不继承 box-sizing，且 box-sizing 对 img 的 width 计算无效 —— 它只约束你显式写的 width/height，但不控制图片自身固有尺寸。所以还得配 max-width: 100% 和 height: auto。
移动端键盘弹出时 viewport 缩放可能临时干扰计算，此时 min-width: 0 有时比 box-sizing 更管用。
flex 或 grid 布局里 box-sizing 还重要吗
非常重要，而且容易被忽略 —— box-sizing 解决的是“单个元素内部尺寸是否溢出”，而 flex/grid 解决的是“多个元素之间如何分配空间”。两者不互斥，要一起用。
例如：flex-basis: 50% 的子项，如果内部有 padding: 12px 且仍是 content-box，那它的实际占用宽度就是 50% + 24px，可能直接突破父容器。
另外注意：flex-shrink: 1 在含长文本的子项上常常失效，不是因为 box-sizing，而是因为隐式 min-width: auto 阻止收缩 —— 这时候得单独加 min-width: 0，和 box-sizing 是两件事，但常一起出现。
