在css样式规则中，min-width属性用于定义元素的最小宽度值，当元素的实际宽度因为内容、父容器限制等原因小于这个设定值时，元素会自动保持最小宽度，不会继续缩小。这个属性在需要保证元素内容完整展示、避免布局错乱的场景中非常实用。
min-width基本语法
min-width属性的语法格式非常简单，直接赋值即可，不需要额外的复杂配置，基本写法如下：
/* 基本语法 */
选择器 {
min-width: 取值;
}
min-width常用取值
min-width支持多种取值类型，不同的取值适用于不同的布局需求，常见的取值类型如下：
- 长度值：可以使用px、em、rem、vw等css支持的长度单位，比如设置最小宽度为200px，元素宽度就不会小于200像素。
- 百分比：基于父容器的宽度计算最小宽度，比如设置min-width: 30%，则元素最小宽度为父容器宽度的30%。
- inherit：继承父元素的min-width属性值。
- initial：设置为默认值，css中min-width的默认值是0，也就是默认没有最小宽度限制。
- unset：如果该属性是继承属性则继承父元素值，否则设置为初始值。
min-width使用示例
固定长度取值示例
下面的代码给一个div元素设置最小宽度为300px，即使父容器宽度只有200px，这个div也会保持300px的宽度：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
width: 200px;
background-color: #f0f0f0;
padding: 10px;
}
.child {
min-width: 300px;
height: 100px;
background-color: #4CAF50;
color: white;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">最小宽度300px</div>
</div>
</body>
</html>
百分比取值示例
百分比取值适合响应式布局，下面的代码让子元素的最小宽度为父容器宽度的50%：
.parent {
width: 80%;
margin: 0 auto;
background-color: #eee;
}
.child {
min-width: 50%;
height: 80px;
background-color: #2196F3;
}
min-width和其他宽度属性的优先级
当元素同时设置了width、min-width、max-width时，优先级规则如下：
| 属性组合 | 生效规则 |
|---|---|
| width + min-width | 如果width小于min-width，min-width生效，元素宽度为min-width的值 |
| width + max-width | 如果width大于max-width，max-width生效，元素宽度为max-width的值 |
| min-width + max-width | 如果min-width大于max-width，min-width生效，元素宽度为min-width的值 |
| 三者同时存在 | 最终宽度会在min-width和max-width之间，优先满足min-width的阈值要求 |
常见使用场景
- 响应式布局中，保证导航栏、侧边栏在窄屏下不会过窄，内容无法点击。
- 表格单元格设置最小宽度，避免内容过长时单元格被挤压变形。
- 按钮、输入框等表单元素设置最小宽度，保证文字内容完整显示。
- 弹性布局flex容器中，给子元素设置min-width，避免子元素被过度压缩。
注意事项
min-width属性对行内元素默认不生效，需要先将行内元素设置为块级元素或者行内块元素，比如设置display: block或者display: inline-block之后，min-width才会生效。另外，min-width的值不能是负值，如果设置负值，浏览器会忽略该设置，使用默认值0。