使用 box-sizing: border-box 可使 height 包含 padding 和 border，避免元素总高度超出设定值；配合 min-height、flex 布局等可实现内容区自适应与布局稳定，推荐全局设置 *{box-sizing:border-box} 以统一行为。
当使用 height 设置 CSS 内容区高度并配合 padding 和 border 时，元素的总占用高度会超出设定值，这是因为默认的盒模型（box-sizing: content-box）将 padding 和 border 算在 width/height 之外。
要实现内容区高度自适应并避免布局溢出，关键在于控制盒模型行为和合理设置尺寸计算方式。
理解默认盒模型的问题
假设你设置：
<font style="font-family: Consolas, 'Courier New', monospace;">
.element {
height: 100px;
padding: 20px;
border: 5px solid #000;
}
</font>此时元素实际占用高度为：
100px (height) + 40px (上下 padding) + 10px (上下 border) = 150px
这会导致布局难以预测，尤其是嵌套或响应式场景中。
使用 box-sizing: border-box 解决问题
将盒模型改为 border-box，使 height 包含 content、padding 和 border：
立即学习“前端免费学习笔记（深入）”；
<font style="font-family: Consolas, 'Courier New', monospace;">
.element {
height: 100px;
padding: 20px;
border: 5px solid #000;
box-sizing: border-box;
}
</font>现在总高度就是 100px，浏览器会自动压缩内容区域高度来容纳 padding 和 border。
推荐全局设置：
<font style="font-family: Consolas, 'Courier New', monospace;">
*,
*::before,
*::after {
box-sizing: border-box;
}
</font>这样所有元素统一处理，减少意外布局偏移。
实现高度自适应的常见方法
若希望内容区高度随内容变化，而不是固定值，可采用以下方式：
- 不设固定 height，让元素自然撑开 —— 高度由内容 + padding + border 自动决定
- 使用 min-height 替代 height，允许内容多时自动扩展
- 在 Flex 或 Grid 布局中利用对齐与伸缩特性，实现动态高度分配
例如：
<font style="font-family: Consolas, 'Courier New', monospace;">
.flex-container {
display: flex;
flex-direction: column;
height: 300px;
}
<p>.auto-height {
padding: 20px;
border: 5px solid #000;
box-sizing: border-box;
min-height: 80px; /<em> 最小高度 </em>/
flex: 1; /<em> 占据剩余空间 </em>/
}
</font>此时元素会在最小限制下自适应容器空间，padding 和 border 不再导致溢出。
基本上就这些。关键是用 box-sizing: border-box 控制尺寸范围，再结合 flex、min-height 等机制实现灵活布局。不复杂但容易忽略。
