max-height 设置元素最大高度限制，防止内容过多时盒子过度扩展，可配合 overflow 实现滚动；min-height 设定最小高度，避免内容少时布局塌陷；两者结合可定义高度范围，提升页面自适应性与视觉稳定性。
在CSS中，max-height 和 min-height 是控制元素高度的重要属性，它们能让你的盒子在不同内容量或屏幕尺寸下保持良好的布局表现。
max-height：限制盒子的最大高度
使用 max-height 可以设置一个元素高度的上限。即使内容增多，盒子也不会超过这个值。
常见用途包括防止图片撑破容器、控制弹窗最大高度等。
• 当内容较少时，盒子可以小于 max-height 的值• 当内容过多时，盒子不会超过 max-height，超出部分默认会溢出（可配合 overflow 控制）
• 常与 overflow: auto 搭配，实现固定最大高度并出现滚动条
示例：
立即学习“前端免费学习笔记（深入）”；
.box {
max-height: 200px;
overflow-y: auto;
}
这样，盒子最多高200px，内容超出会自动出现垂直滚动条。
min-height：保证盒子最小高度
min-height 确保元素至少达到某个高度，即使内容很少也不会塌陷。
这在布局中非常有用，比如让内容区始终占满视口，避免页脚上移。
• 内容多时，盒子会自然撑高，不受 min-height 限制
示例：
立即学习“前端免费学习笔记（深入）”；
.main {
min-height: 400px;
}
当页面内容不足时，main 区域仍保持至少400px高，视觉更稳定。
结合使用 max-height 与 min-height
两者可以同时设置，形成高度范围约束。
例如，希望一个区域不能太矮也不能太高：
.content-box {
min-height: 100px;
max-height: 300px;
overflow-y: auto;
}
这样盒子会在100px到300px之间弹性变化，超出后出现滚动条，用户体验更佳。
基本上就这些。合理使用 min-height 和 max-height，能让页面布局更灵活、适应性更强。
