height 默认控制 content 区域尺寸，因 css2.1 规范将其定义为内容区高度，配合 box-sizing: content-box（默认值），导致 padding 和 border 额外增加总高度；改用 border-box 可使 height 包含 content、padding 和 border，更符合布局预期。
height 默认只控制 content 区域尺寸
因为 CSS 初始规范（CSS2.1）定义的 height 就是内容区高度，不是“整个盒子”的高度。它和 width 一样，属于 content-box 模型的核心行为——你设多少，就只是内容部分占多少空间，padding 和 border 是额外“包”在内容外面的层。
box-sizing: content-box 是默认值，不是 bug 是设计
这个行为不是缺陷，而是标准模型的明确约定。浏览器默认使用 box-sizing: content-box，意味着：
-
height: 100px→ 内容区高 100px - 加上
padding-top: 10px和border-bottom: 2px solid→ 实际视觉高度变成 100 + 10 + 2 = 112px（不含 margin） - 如果父容器高度固定为 100px，子元素就会溢出或触发滚动
为什么 border-box 更常用？
因为现实布局中，我们通常想“这个盒子就要刚好 200px 高”，而不是“内容塞进 200px，再加 padding 和 border 后变成 224px”。用 box-sizing: border-box 后：
-
height: 100px表示整个盒子（content + padding + border）高 100px - 内容区高度自动收缩：100px − padding − border
- 配合全局重置更稳妥：
* { box-sizing: border-box; }
容易踩的坑：height + overflow + border/padding 组合
当设置 height: 200px 且有 padding 或 border 时，若未改 box-sizing，内容超出会导致：
- 文字撑开容器（
overflow: visible默认） - 滚动条意外出现（
overflow: auto） - 父容器高度计算错误（尤其 flex / grid 布局中）
- JavaScript 获取
offsetHeight返回的是含 padding + border 的值，和style.height不一致
真正麻烦的不是 height 本身，而是忘记它和 box-sizing 的绑定关系——写死 height 时，几乎总该同步确认 box-sizing 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
