max-width 通过设为100%限制块级元素不超出父容器，配合height:auto保图比例；min-width守住响应式底线，如导航项120px、输入框200px；二者组合划定弹性区间，需注意box-sizing、flex收缩及IE兼容性。
max-width 怎么阻止元素撑破容器
当父容器宽度有限（比如 .container { width: 800px }），子元素内部有长文本、大图片或未换行的 URL 时，max-width 是防止溢出的第一道防线。
- 对块级元素设
max-width: 100%，它就不会宽过父容器 —— 但注意：这不等于“自适应”，它只限制上限，实际宽度仍由内容或width决定 - 图片常用
img { max-width: 100%; height: auto; }，既防溢出又保比例；漏掉height: auto会导致拉伸变形 - 表格列宽失控？给
table加max-width: 100%不够，必须配合table-layout: fixed和td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }才能真正截断
min-width 如何避免元素被压缩到不可用
min-width 的核心作用不是“设最小尺寸”，而是“守住可用性底线”——尤其在响应式布局中，小屏下内容缩得太窄会失去可读性或交互能力。
- 导航栏文字挤成一坨？给
nav a设min-width: 120px，比单纯靠padding更可靠 - 表单输入框在手机上被压扁？
input[type="text] { min-width: 200px; }比写死width: 200px更灵活，大屏下仍可撑开 - 慎用
min-width: 100vw：它会让元素至少占满视口宽度，可能引发水平滚动条，尤其在有垂直滚动条的页面里（滚动条占空间，100vw会略超）
max-width 和 min-width 同时用的典型场景
两者组合本质是划定一个“弹性区间”，常见于卡片、模态框、富文本容器等需要兼顾伸缩与底线的组件。
- 响应式卡片：
.card { min-width: 300px; max-width: 600px; width: 100%; }—— 小屏不窄于 300px，大屏不宽过 600px，中间自由伸缩 - 编辑器预览区：内容可能极短（如空行）或极长（如无空格 JSON），用
min-width: 280px; max-width: 80ch;（ch单位更适配字体宽度）比像素值更健壮 - 注意层叠顺序：如果同时设了
width、min-width、max-width，浏览器按min-width ≤ width ≤ max-width约束，超出范围时以边界值为准；若min-width > max-width，max-width会被忽略
.responsive-box {
width: 100%;
min-width: 280px;
max-width: 768px;
margin: 0 auto;
}
容易被忽略的计算细节和兼容性坑
这两个属性看着简单，但实际生效受盒模型、内边距、边框、甚至 display 类型影响，稍不注意就失效。
立即学习“前端免费学习笔记（深入）”；
-
box-sizing: border-box必须配齐：否则padding和border会额外加在max-width之外，导致实际宽度超标 - Flex 容器里的子项默认不尊重
max-width，需显式加flex-shrink: 1或min-width: 0（后者解决内容过长时 flex item 不收缩的问题） - IE9+ 支持
max-width/min-width，但 IE9 下max-width对table元素无效；如需兼容，改用width+max-width双写，并测试table-layout: fixed - 百分比值基于包含块计算，而包含块可能不是你直觉中的父元素（比如定位元素的包含块是最近的 position ≠ static 祖先）
