统一使用 border-box 可消除浏览器盒模型差异，使 padding 和 border 包含在 width/height 内；需通过 *, *::before, *::after { box-sizing: border-box; } 全局重置，并注意表单控件、第三方库及内联元素的兼容性。
直接将所有元素的盒模型设为 border-box，就能让 padding 和 border 不再撑大元素尺寸，大幅减少跨浏览器差异。
为什么不同浏览器表现不一致
传统盒模型（content-box）下，width/height 仅指内容区大小，而 padding、border 会额外增加总宽高。早期 IE 的怪异模式默认用 border-box，Chrome/Firefox 默认 content-box，导致相同 CSS 在不同浏览器渲染出不同尺寸。
统一使用 border-box 的写法
在 CSS 开头加上这段重置规则，覆盖所有常见元素：
*, *::before, *::after {
box-sizing: border-box;
}
这样所有元素（包括伪元素）都按 border-box 计算尺寸，padding 和 border 会被包含在 width/height 内，行为完全一致。
立即学习“前端免费学习笔记（深入）”；
需要特别注意的例外情况
-
表单控件（如 input、textarea）：部分老版本 Safari 或 Firefox 可能对某些 type（如 number、range）有特殊渲染，建议单独测试，必要时显式设置
box-sizing: border-box - 第三方组件库：有些库（如 Bootstrap 4+）已默认启用 border-box，重复设置无害但可省略；Bootstrap 3 则需手动添加
- 内联元素（如 span）：box-sizing 对 display: inline 元素无效，需确保它有块级或弹性上下文（如 display: inline-block）才生效
配合 rem/vw 布局更稳定
box-sizing 统一后，配合相对单位（如 rem、vw）定义宽高和间距，能进一步削弱设备像素比、缩放、字体设置带来的影响。例如：
.card {
width: 20rem; /* 固定逻辑宽度 */
padding: 1rem; /* 内边距不撑开总宽 */
border: 0.125rem solid #ccc;
}
此时 card 总宽度恒为 20rem，无需手动减去 padding 和 border。