box-sizing: border-box 是将 border 和 padding 计入 width/height 的计算基准；默认 content-box 会使实际宽高超出设定值，导致布局错位；推荐全局用 、::before、*::after 设置，并注意第三方库、内联样式及 iframe 需单独处理。
box-sizing: border-box 是什么
它不是“让边框包含进宽高”的魔法开关，而是重新定义了 width 和 height 的计算基准：把 border 和 padding 算进你写的那个数值里，而不是加在外面。
默认的 box-sizing: content-box 会让 width: 200px 只管内容区，再加上 padding: 10px 和 border: 1px，实际占位就变成 222px——这在栅格布局、flex 子项或响应式容器里极易错位。
怎么全局启用 border-box
最稳妥的做法是用通配符重置，但要注意边界情况：
-
* { box-sizing: border-box; }简单直接，但会影响所有元素（包括svg、input[type="search"]等原生控件的内部渲染，极少数场景下会干扰默认行为） - 更推荐
*, *::before, *::after { box-sizing: border-box; }，覆盖伪元素，避免自定义 tooltip 或 popover 出现尺寸偏差 - 不建议只写
html { box-sizing: border-box; }，子元素不会继承该属性
哪些地方必须显式设置
即使用了全局重置，以下情况仍需单独声明：
立即学习“前端免费学习笔记（深入）”；
- 第三方 UI 库组件（如
ant-design或element-plus的部分组件会强制重写box-sizing，需用!important覆盖） - 内联样式中动态设置宽高时（例如 JS 修改
el.style.width = '100%'），若父容器是content-box，结果可能意外溢出） -
iframe内部文档需独立设置，外部样式不穿透
示例：修复一个常见错位
.card {
width: 300px;
padding: 16px;
border: 1px solid #ccc;
/* 不加这一行，实际宽度 = 300 + 32 + 2 = 334px */
box-sizing: border-box;
}border-box 对 calc() 和百分比的影响
它不改变计算逻辑，但会改变你对“100%”的预期：
-
width: calc(100% - 20px)在border-box下，减去的是外部空间；但如果你还写了padding: 10px，那这 20px 实际已包含在“100%”内——容易误以为要再减 - 嵌套时，父容器
padding不影响子元素的100%计算基准（仍是父 content area 宽度），但子元素设了border-box后，它的100%就真等于父 content area 宽度，不会撑破 - 移动端
viewport缩放时，border-box能更好保持视觉比例，因为边框和内边距不再“额外抢空间”
真正容易被忽略的是：当使用 transform: scale() 缩放整个盒子时，border 会随缩放变粗，但 box-sizing 对此毫无约束力——它只管布局阶段的尺寸归属。
