box-sizing 在老版 Chrome/Firefox 里为什么没生效
因为 box-sizing 在 CSS3 正式成为标准前，部分浏览器只认带前缀的写法。比如 Chrome 9–22、Firefox 4–15 都不支持无前缀的 box-sizing，直接写 box-sizing: border-box 会被忽略。
实操建议：
- 必须同时写全三套：无前缀 +
-webkit-box-sizing+-moz-box-sizing -
-ms-box-sizing可省略——IE8+ 已原生支持无前缀版本，IE7 及更早根本不支持box-sizing - 如果用 Autoprefixer，确保配置未禁用
ie >= 8，否则它可能自动删掉-moz-前缀（Firefox 16+ 确实不需要了，但项目若需兼容 Firefox 15 就得留着）
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}border-box 在 Flex/Grid 容器里的表现差异
当元素既是 display: flex 子项，又设了 box-sizing: border-box，它的 width 计算逻辑会和普通块级元素不同：Flex 会先按 content-box 解析初始尺寸，再根据 box-sizing 调整 padding/border 是否挤占可用空间。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 给 Flex 子项设
width: 200px; padding: 10px; box-sizing: border-box，结果实际占位仍是 200px（含 padding），但父容器剩余空间计算可能出错 - Grid 中设
grid-template-columns: 1fr 200px，右侧项用了border-box+ 大 padding，视觉上溢出，因为 Grid 轨道宽度不自动重算内边距
关键点：Flex/Grid 的尺寸分配发生在盒模型计算之前，box-sizing 不改变它们的布局算法，只影响最终渲染时内容区大小。
reset.css 里重置 box-sizing 的坑
很多 reset 库（如 Normalize.css）会在全局写 * { box-sizing: border-box }，看似省事，但容易在 SVG、表单控件或第三方组件里引发意外缩放或错位。
使用场景限制：
- SVG 元素设
box-sizing: border-box无效，且可能干扰viewBox缩放逻辑 -
<input type="radio">或<select></select>在某些旧版 Safari 中，强制border-box会导致内部图标被裁切 - 第三方 UI 组件（如 Ant Design v3）内部已精细控制盒模型，全局重置反而破坏其尺寸一致性
更稳妥的做法是只对明确需要的容器类加作用域：.layout, .card, .form-field { box-sizing: border-box; }。
PostCSS Autoprefixer 对 box-sizing 的处理边界
Autoprefixer 默认只补全到「主流浏览器最近两个版本」，这意味着它不会为 box-sizing 加 -moz- 前缀——因为 Firefox 16+ 已完全支持，而当前主流版本远高于此。但如果你的 browserslist 配置写了 firefox >= 10，它就会补。
性能与兼容性提醒：
- 加前缀本身几乎零性能损耗，但冗余前缀会增大 CSS 体积（尤其在大量使用时）
- Webpack/Vite 构建中若开启 CSS 压缩，
cssnano默认会删掉重复声明（比如-webkit-box-sizing和box-sizing同时存在时只留后者），导致兼容性回退 - 验证方式：构建后检查生成 CSS 文件，搜索
box-sizing，确认三套声明都存在且顺序正确（前缀版在前）
真正容易被忽略的是：Autoprefixer 不处理你手写的 @supports 块里的 box-sizing，那些得自己手动加前缀。
