box-sizing 默认为 content-box，导致 padding 和 border 额外增加元素高度；子元素撑开父容器、flex 布局下 height 失效、绝对定位中 height: 100% 不匹配滚动内容高度也是常见原因。
box-sizing 默认是 content-box，padding 和 border 会额外加高
这是最常见也最容易被忽略的原因：你写了 height: 25px，但浏览器默认按 box-sizing: content-box 计算，意味着这 25px 只是内容区高度。只要元素有 padding: 5px 或 border: 1px solid #000，实际总高度就变成 25px + 10px（上下 padding）+ 2px（上下 border）= 37px。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局重置盒模型：
*, *::before, *::after { box-sizing: border-box; } - 或针对问题元素单独设置：
box-sizing: border-box—— 此时height: 25px就真等于最终显示高度（前提是子元素不撑开它） - 检查开发者工具「Computed」面板里的
height、padding-top、border-top-width等值，一眼看清叠加关系
子元素撑开父容器，height 被“无视”
哪怕你写了 height: 25px，只要里面有个 默认高 32px，或一个 span 套了 font-size: 18px; line-height: 2，父容器就会自动扩展——这不是 bug，是 CSS 的正常流式行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
overflow: hidden强制截断（慎用，可能藏掉内容） - 给子元素统一设
height或line-height，例如：input { height: 20px; margin: 0; } - 更健壮的做法是改用
min-height: 25px+box-sizing: border-box，让容器“至少” 25px 高，又允许内容自然撑开
flex 布局下 height 行为突变
一旦父容器设了 display: flex，子元素的 height 就可能失效：flex 子项默认 align-items: stretch，会试图拉满父容器高度；但如果父容器没设高度，或子元素自己加了 height，反而会破坏拉伸逻辑，导致高度忽高忽低。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认父容器是否设置了
height或min-height—— flex 容器若高度未定义，子项的height很可能被忽略 - 移除子元素上冗余的
height，改用flex: 1或align-self: stretch显式控制 - 检查 computed 样式中
align-items是否被重置库（如 Bootstrap）悄悄覆盖成flex-start
绝对定位/滚动容器里 height: 100% 不等于内容高度
在 position: relative + overflow: auto 的容器里，给子元素写 height: 100% 或伪元素 ::after { height: 100% }，它只会匹配容器的“设定高度”，而不是滚动后的真实内容高度。比如容器 height: 200px，但内容撑到 600px，那 100% 仍是 200px。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
height: 100%去适配可滚动内容高度 - 改用 JavaScript 动态读取
scrollHeight并赋值，或用min-height+flex布局替代 - 如果只是装饰性背景条，考虑用
background-image或linear-gradient模拟，避开高度计算
box-sizing 和子元素溢出这两关。别急着调 height，先打开开发者工具看一眼「Computed」里的盒模型图示——padding 和 border 是不是正大剌剌地叠在 height 外面，比猜原因快十倍。 
