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