box-sizing 重新定义 width/height 的作用范围：content-box 下只控内容区，border-box 下控制总宽。默认 content-box 导致 width:200px 实际占 234px；border-box 使 width=总宽，padding/border 向内挤压。全局重置需含 、:before、*:after 并设 inherit，offsetWidth 值直接受其影响。
box-sizing 不是“让宽度变小”的魔法，而是重新定义了 width 和 height 到底管哪一段——它决定你写的像素值，究竟是只算内容，还是连 padding 和 border 一起算进去。
为什么 width: 200px 渲染出来是 250px？
因为默认是 box-sizing: content-box。此时 width 只控制 content 区域，而 padding 和 border 是额外加在外部的。比如：
.card {
width: 200px;
padding: 15px;
border: 2px solid #333;
}它的实际总宽度 = 200 + 15×2 + 2×2 = 234px。这种“写了 200 却占 234”的现象，在栅格布局、Flex 容器子项、百分比宽度容器里极易导致溢出或错位。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 设置
width: 50%的两个子元素，并排后换行（总宽超 100%） - 给
input加padding后撑破父容器 - 用
calc(100% - 20px)做留白，结果发现还差几个像素
border-box 是现代布局的事实标准
设为 box-sizing: border-box 后，width 就是最终渲染的总宽度，padding 和 border 会从这个宽度里“往里挤”，content 区域自动缩小。上面那个 .card 设为 border-box 后，总宽就是稳稳的 200px。
使用场景包括：
- 所有 Flex/Grid 子项（避免
gap+padding导致尺寸失控） - 表单控件（
input、textarea等加内边距后仍需对齐） - 响应式卡片/网格列表（统一尺寸，不因边框开关改变布局流）
- 与
calc()配合做精确减法（如width: calc(100% - 4px)，直接对应 border 总宽）
全局重置必须用 *:before/:after
只写 html { box-sizing: border-box; } 不够——伪元素默认不继承，会导致你加了 ::before 后突然变大。正确写法是：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}原因：
-
*覆盖所有元素主体 -
*:before和*:after确保伪元素也遵循同一规则（否则它们走默认content-box，容易在绝对定位或图标生成时破坏尺寸预期） -
inherit比硬写border-box更健壮，方便局部覆盖（比如某个组件需要回退到content-box）
JavaScript 中 offsetWidth 受其直接影响
offsetWidth 和 offsetHeight 返回的是元素在页面上实际占据的像素值，这个值会随 box-sizing 改变：
-
content-box下：offsetWidth === width + padding×2 + border×2 -
border-box下：offsetWidth === width（前提是没 margin）
这意味着：如果你用 JS 动态计算尺寸（比如拖拽、动画、虚拟滚动），必须确认 CSS 中的 box-sizing，否则读到的值和视觉表现对不上。调试时可直接在 DevTools 的 Computed 面板里看 “Box sizing” 一栏，比查代码更快。
最容易被忽略的一点：第三方 UI 库（比如某些旧版 Ant Design 或自定义组件）可能未做全局重置，或者显式设了 content-box。遇到奇怪的尺寸偏差，先检查该元素的 computed box-sizing，而不是立刻怀疑 margin 或 flex-shrink。
