元素实际高度默认由height（内容区）+上下padding+上下border+上下margin构成，但margin仅影响外部间距；box-sizing: border-box时height已包含padding和border，仅需加margin；内容溢出或auto高度会动态调整，需综合overflow、父容器及display类型判断。
元素的实际高度不是只看 height 值，它由内容、padding、border 和 margin 共同决定，但 margin 不属于元素自身尺寸——它只影响外部间距。
默认 box-sizing: content-box 下怎么算实际高度
这是浏览器默认行为，height 仅代表内容区高度，其他部分额外叠加：
-
height是内容区高度（不含padding和border） - 实际占据高度 =
height+ 上下padding+ 上下border+ 上下margin - 若内容超出设定的
height（比如文字换行、图片撑开），且未设overflow，实际高度会自动撑大，此时height失效
例如：height: 80px; padding: 12px; border: 2px solid #000; margin: 16px; → 实际占据高度 = 80 + 12×2 + 2×2 + 16×2 = 140px
box-sizing: border-box 改变什么
它让 height 包含内容区 + 上下 padding + 上下 border，但不包含 margin：
立即学习“前端免费学习笔记（深入）”；
- 设定
height: 80px后，无论加多少padding或border，内容区会自动压缩以保证总高仍是 80px - 实际占据高度 = 设定的
height+ 上下margin - 推荐全局启用：
* { box-sizing: border-box; }，避免布局“意外变高”
height: auto 的真实行为
这不是“没设高度”，而是由内容驱动计算，但规则因元素类型而异：
- 块级非替换元素（如
<div>）：高度 = 内容高度 + 上下padding+ 上下border（margin不计入） - 绝对定位元素：若设
height: auto，且父容器有明确高度，它仍按内容撑开；但若设height: 100%，则参考父容器的padding-box高度 - 行内元素（如
<span>）：height属性无效，实际行高由line-height和字体决定
常见陷阱：height: 100% 在非绝对定位、非 flex 子项中往往失效——因为父容器高度可能为 auto，导致百分比无基准可依。
容易被忽略的细节
实际高度还受以下因素隐式影响，调试时经常漏看：
-
overflow: hidden或scroll会强制元素尊重height，阻止内容撑高 -
display: flex或grid容器中的子项，height: auto行为可能被对齐属性（如align-items）覆盖 - 表格单元格（
<td>）和替换元素（<img>）有自己的固有高度逻辑，height仅在特定条件下生效 - 字体渲染差异（尤其小字号+行高）会导致内容区高度浮动，进而影响整体高度
真正要控制高度，得同时盯住 box-sizing、overflow、父容器约束和内容本身——单改 height 很少能一锤定音。
