现代浏览器默认 content-box，ie8+ 需 -ms- 前缀支持 border-box，ie6/7 完全不识别；全局启用推荐 html { box-sizing: border-box; } + 伪元素继承 + 表单控件白名单；flex/grid 中需单独设置子项 box-sizing。
box-sizing属性在不同浏览器中的默认值差异
现代浏览器默认用 content-box，IE8+ 也支持，但老版本 IE（如 IE6/7）压根不识别 box-sizing——它只按 content-box 渲染，且无法被覆盖。这意味着如果你没显式声明，又在 IE7 下调试，width: 100px; padding: 10px; 就真会撑成 120px 宽，而你写的 CSS 看似“没毛病”。
真正踩坑的不是兼容性缺失，而是「你以为它生效了」：比如全局重置写了 * { box-sizing: border-box; }，但在 IE7 下这条规则被整个忽略，子元素依然走原始模型。
- Chrome/Firefox/Edge 默认
content-box，支持border-box无条件 - IE8+ 支持
box-sizing，但需加-ms-前缀（-ms-box-sizing）才稳妥 - IE6/7 完全不支持，任何前缀或写法都无效，只能靠 hack 或放弃精确尺寸控制
如何安全地全局启用 border-box 模型
最常用写法 * { box-sizing: border-box; } 看似一劳永逸，但它会让伪元素（::before/::after）、表单控件（<input>、<button></button>）也套用该模型——而某些原生控件（尤其旧版 Safari 的 <select></select>）在 border-box 下会出现内边距错位或文字截断。
更稳妥的做法是分层控制：先重置所有块级容器，再单独放行特殊元素。
- 用
html { box-sizing: border-box; }+*::before, *::after { box-sizing: inherit; }避免伪元素意外失效 - 对表单控件加白名单重置：
input, select, textarea, button { box-sizing: content-box; }（按需调整） - 若项目需支持 IE8，必须补
-ms-box-sizing: border-box;，且确保 CSS 文件未被条件注释剔除
border-box 在 flex/grid 布局中的实际表现
很多人以为设了 box-sizing: border-box 就能彻底告别宽度计算焦虑，但在 flex 容器里，flex-basis 的计算起点仍是 content-box 模式——也就是说，flex-basis: 200px 指的是内容区宽 200px，padding/border 仍会额外撑开空间，除非你同时设 box-sizing: border-box。
Grid 也是同理：grid-template-columns: 1fr 200px 中的 200px 是轨道大小，但格子内部元素是否溢出，取决于它自己的 box-sizing。
- flex 项上必须单独声明
box-sizing: border-box，否则 padding 会让实际占用宽度 >flex-basis - grid item 同样需要显式设置，
border-box不会从 grid 容器继承 - 使用
min-width: 0配合border-box可防止 flex item 因内容过长而撑破容器（常见于含文本的卡片）
为什么有时候设了 border-box 还是算不准尺寸
最常被忽略的是「继承链断裂」：某个父元素用了 display: table-cell 或 position: absolute，会导致子元素的 box-sizing 虽然声明了，但浏览器在布局阶段跳过了该计算逻辑——尤其是当元素有 transform 或 will-change 时，渲染管线可能绕过 box-sizing 的尺寸归一化步骤。
另一个隐形干扰源是字体度量：某些中文字体（如“微软雅黑”）在 Windows 下的 line-height 会隐式增加上下空白，看起来像 padding，实则不属于盒模型范畴，border-box 对它完全无效。
- 检查 computed styles 时，看
box-sizing是否显示为border-box，而非inherited或unset - 用
getBoundingClientRect()在控制台实测元素真实宽高，比肉眼判断更可靠 - 如果用了 CSS-in-JS 库（如 Emotion），确认其插件未自动剥离
box-sizing相关声明
事情说清了就结束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
