通过max-width、min-width、max-height和min-height可灵活控制元素尺寸，避免溢出或布局崩溃；max-width限制最大宽度，使图片等自适应缩放，常设为100%或固定值并配合居中；min-width防止元素过小，保障侧边栏或文本区最小空间；max-height限制最大高度，结合overflow实现内容滚动，适用于弹窗；min-height确保最小高度，如设为100vh实现最少占满一屏；与width/height共存时取更严格的值，合理组合可提升响应式设计的稳定性与可读性。
在CSS中，通过max-width、min-width、max-height和min-height属性可以灵活控制元素的尺寸范围，避免内容溢出或布局崩溃，尤其在响应式设计中非常关键。
限制最大宽度：max-width
max-width 设置元素允许的最大宽度。当容器自然宽度超过该值时，元素会收缩到设定值以内，常用于防止图片或盒子撑破父容器。
常见用法：- 设置
max-width: 100%;让图片在小屏幕上自动缩放不溢出 - 配合居中使用：
max-width: 800px; margin: 0 auto;限制内容区最大宽度并居中显示
设定最小宽度：min-width
min-width 确保元素不会被压缩得过小，适合防止文字换行过多或侧边栏塌陷。
实用场景：- 侧边栏设置
min-width: 250px;避免在窄屏下内容挤成一团 - 弹性布局中控制项目最小展示空间
控制高度范围：max-height 与 min-height
max-height 限制元素最大高度，超出部分可滚动；min-height 保证最小高度，常用于占位或全高布局。
立即学习“前端免费学习笔记（深入）”；
典型应用：- 模态框或弹窗使用
max-height: 80vh; overflow-y: auto;防止内容过多时撑满屏幕 - 页面主内容区设
min-height: 100vh;实现“最少占一屏”的视觉效果
这些尺寸约束属性与 width 和 height 共同作用时，浏览器会自动取最合适的值。例如设置了 width: 200px 但 max-width: 150px，最终宽度为150px。
基本上就这些。合理组合使用这四个属性，能让网页在各种设备上都保持良好结构和可读性。
