min-width、max-width、min-height 和 max-height 可控制元素尺寸范围，防止内容压缩或过度拉伸。通过设置最小宽度避免文字挤占，用最大宽度提升大屏可读性，图片配合 max-width: 100% 防溢出，min-height 可实现全屏布局或统一卡片高度。组合使用这些属性能创建响应式且稳定的界面结构，优先级上实际尺寸受限于最小与最大值之间，由内容和容器空间共同决定，结合 flex、grid 和媒体查询效果更佳。
在网页布局中，控制元素的尺寸范围非常重要。通过设置最小和最大尺寸，可以让页面在不同设备和窗口大小下保持良好的可读性和可用性。CSS 提供了 min-width、max-width、min-height 和 max-height 属性，帮助开发者灵活控制元素的伸缩行为。
1. min-width：防止内容被压缩
使用 min-width 可以确保元素不会小于某个宽度，避免内容在小屏幕上被挤压变形。
常见用途：- 为容器设置最小宽度，防止文字换行过于频繁
- 在弹性布局或网格布局中保护子元素不被过度压缩
- 配合百分比宽度使用，实现响应式但不失控的效果
示例：
.container {
width: 50%;
min-width: 300px; /* 宽度最小为300px */
}
2. max-width：限制元素过度拉伸
max-width 能防止元素在大屏幕上变得过宽，提升可读性，尤其适用于文本内容区域。
立即学习“前端免费学习笔记（深入）”；
实用技巧：- 设置文本块最大宽度为 800px 左右，符合视觉阅读习惯
- 图片设置 max-width: 100% 防止溢出父容器
- 与 auto 水平外边距结合，实现居中且有宽度限制的布局
示例：
.content {
max-width: 800px;
margin: 0 auto; /* 水平居中 */
}
img {
max-width: 100%;
height: auto;
}
3. min-height：保证内容区域最小高度
min-height 常用于确保容器至少占据一定空间，比如页脚始终在视口底部之上。
典型场景：- 全屏展示区域（如 banner 或登录页）设 min-height: 100vh
- 卡片组件保持统一高度感，即使内容较少
- 避免背景或边框因内容短而中断
示例：
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
4. 组合使用实现弹性布局
将这些属性组合使用，可以创建既灵活又稳定的 UI 结构。
推荐写法：- 用 width/max-width 控制理想宽度，min-width 防止收缩过度
- 在 Flex 或 Grid 子项中使用 min-height 和 max-height 限制伸缩范围
- 结合媒体查询微调临界点下的尺寸限制
综合示例：
.card {
width: 100%;
min-width: 250px;
max-width: 500px;
min-height: 200px;
padding: 1rem;
}
基本上就这些。合理使用 min-width、max-width、min-height 和 max-height，能让页面更适应各种屏幕，同时保持设计完整性。关键是理解它们与 width/height 的优先级关系：实际尺寸会落在最小和最大之间，由内容和可用空间共同决定。
