box-sizing: border-box 使 width/height 包含 padding 和 border，内容区自动压缩，总宽严格等于设定值；根本原因是覆盖默认的 content-box 模式。
box-sizing: border-box 是什么，为什么它能治撑破
固定宽度盒子被 padding 或 border 撑破，根本原因是浏览器默认用 content-box 计算尺寸：你写 width: 300px，它只管内容区宽 300px，再额外加左右 padding 和 border——结果总宽变成 300 + 30 + 4 = 334px。父容器没预留空间，就直接溢出。
box-sizing: border-box 把规则翻过来：width 指的是“最外边框的总宽”，padding 和 border 全部往里扣，不往外涨。内容区自动压缩，总宽严格等于你写的值。
全局启用 * { box-sizing: border-box } 的坑在哪
通配符写法最省事，但真上线前得盯住三类风险：
- 第三方 UI 组件（比如老版本 Element UI、某些 Web Component）可能显式写了
box-sizing: content-box来适配旧逻辑，被通配符覆盖后边框/内边距错位 -
<select></select>、<textarea></textarea>在部分旧版 Safari/IE 中默认仍是content-box，建议单独加固：input, select, textarea, button { box-sizing: border-box; } - 伪元素（
::before/::after）若参与布局（如用作装饰块），需确保也被覆盖——更稳妥的写法是*, *::before, *::after { box-sizing: border-box; }
用了 border-box 还撑破？检查 max-width 和 min-width
很多人只改了 width，却忘了 max-width 和 min-width 同样走 border-box 规则。如果父容器设了 max-width: 400px，子元素又带 padding: 20px，但没加 box-sizing: border-box，照样撑爆。
Flex 布局下尤其容易漏掉这个点：
- Flex 子项默认
min-width: auto，会阻止收缩，哪怕用了border-box也顶不住长文本或图片 - 必须配合
min-width: 0才能真正释放收缩能力 -
input、textarea这类替换元素还自带min-width: min-content，得显式覆盖
IE8 兼容时别硬套 border-box
IE8 支持 box-sizing，但只认 -ms-box-sizing，且 flex 完全不支持。真要兼容：
- 放弃 flex，改用
display: table-cell或float + margin模拟布局 - 所有宽度手动减去
padding和border，例如width: calc(100% - 20px)（20px = 左右padding+border） - 更现实的做法：确认是否有真实 IE8 用户；若有，用条件注释加载独立降级样式，而不是让现代代码迁就它
真正容易被忽略的，是 box-sizing 对 max-width 和 min-width 的影响同样生效——改完 width 别忘了查这两个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
