box-sizing: content-box 是默认盒模型，width/height 仅控制内容区尺寸，padding 和 border 会额外叠加在内容区外，导致元素总宽高超出设定值；例如 width: 120px; padding: 12px 24px 时实际宽度为 168px。
因为浏览器默认用的是 box-sizing: content-box，而在这个模型里，padding 不是“往里缩”，而是“往外加”——它被算在你写的 width 和 height 之外。
content-box 是什么？为什么它让 padding “撑开”元素
这是 CSS 的默认盒模型，所有现代浏览器都这么干。它的规则很直白：width 和 height 只管内容区（content），padding、border 全部额外叠加在内容区外面。
比如：
.btn {
width: 120px;
padding: 12px 24px;
}实际占位宽度是 120 + 24 + 24 = 168px，不是 120px。这不是 bug，是规范定义的行为。
立即学习“前端免费学习笔记（深入）”；
- 你写
height: 40px; padding-top: 8px;→ 实际高度变成40 + 8 + 8 = 56px（上下 padding 都算） - 没写
width的块级元素（如普通div）加水平padding不会“变宽”，但内容区会被挤压——因为宽度 auto，浏览器自动收缩内容来腾出 padding 空间 - 写了
height的元素，垂直padding一定撑高，哪怕内容是空的
border-box 怎么解决这个问题
box-sizing: border-box 把 width 的含义从“内容宽”改成“边框盒总宽”。你设 width: 120px; padding: 12px 24px;，浏览器就真让整个元素占满 120px，内容区自动压缩成 120 − 24 − 24 = 72px 宽。
关键点：
- 必须连同伪元素一起重置：
* { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; } - 只给某个类加
border-box很容易漏掉第三方组件或动态插入的节点，导致布局不一致 - 它不改变
margin行为——margin始终是外部的，和盒模型计算无关
哪些情况即使用了 border-box 还会“看起来撑大”
不是所有视觉上的“撑开”都是 padding 导致的，常见干扰项：
-
flex子项同时写了width: 200px和flex: 1→ 尺寸逻辑冲突，box-sizing不干预 flex 计算 - 父容器有
padding但没设width，子元素用width: 100%→ 它按父content width计算，再加自己的padding就溢出了 -
display: inline-block元素间的空白字符产生看不见的间隙，误以为是padding撑开 - 字体大小、行高、
vertical-align导致基线对齐错位，视觉上像“被顶高”
调试时直接看开发者工具「Computed」面板里的 box-sizing 值，再对照右上角盒模型图示——如果「Layout Width」明显大于「Width」，且 box-sizing 是 content-box，那基本就是它了。
