CSS min-height 语法
在 CSS 中，min-height 属性用于定义元素的最小高度。
语法：
min-height: 取值;说明：
min-height 的取值主要有以下 2 种：
- 关键字：auto（默认值，通常为 0）、fit-content 等。
- 数值：px、%、rem 等。
对于 min-height 属性，小伙伴们要清楚以下几点。
- 如果 height 的值小于 min-height，此时 min-height 属性会覆盖 height 属性。
- min-height 属性也会覆盖 max-height 属性，如果 min-height 的计算值大于 max-height 的计算值。在这种冲突情况下，min-height 的值会优先。
- min-height 对于确保元素即使内容很少也能保持一定的最小高度非常有用。
CSS min-height 摘要
| 属于 | CSS 盒子模型 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | auto |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS min-height 示例
接下来，我们通过一个简单的例子来讲解一下 CSS min-height 属性是如何使用的。
示例：min-height 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
min-height: 100px;
width: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<p>绿叶网绿叶网</p>
<p>绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网</p>
<p>绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网</p>
</body>
</html>页面效果如下图所示。
分析：
从结果可以看出来，min-height 会保证 p 元素最小的高度为 100px。比如第 1 个 p 元素的高度是由内容撑起来的（高度小于 100px），但这里显示却是刚好 100px，就是因为 min-height: 100px; 起的作用。
CSS 与尺寸相关的属性
在 CSS 中，与尺寸相关的属性有很多，常用的如下表所示。
| 属性 | 说明 |
|---|---|
| width | 定义元素的宽度 |
| height | 定义元素的高度 |
| max-width | 定义元素的最大宽度，防止其超过此值 |
| max-height | 定义元素的最大高度，防止其超过此值 |
| min-width | 定义元素的最小宽度，确保其不小于此值 |
| min-height | 定义元素的最小高度，确保其不小于此值 |
