max-width 不生效主因是 width 值大于 max-width，导致约束失效；应优先用 max-width 或设 width: auto 配合；min-width 不防内容溢出，需配合 word-break、max-width: 100% 等处理；响应式中 max-width 用于弹性封顶，媒体查询用于断点布局切换；IE8 对 min-width 支持差，建议降级处理或放弃兼容。
max-width 设置后元素不生效？检查是否被 width 覆盖
当 max-width 看起来没起作用，大概率是元素同时设置了 width 且值大于 max-width。CSS 中 width 是“目标宽度”，而 max-width 是“上限约束”——只有实际渲染宽度会尝试超过它时才触发限制。
常见错误写法：width: 500px; max-width: 300px;
这会导致元素强行撑到 500px，max-width 形同虚设。
正确做法是：优先用 max-width，让宽度自然流动；如需固定基线，改用 width: auto 配合 max-width：
.card {
width: auto;
max-width: 400px;
margin: 0 auto;
}
- 块级元素默认
width: auto，此时max-width可控其最大伸展范围 - 行内元素需先转为
display: inline-block或block才能生效 - Flex 项目中，
max-width默认有效，但若父容器设了flex-shrink: 0，可能压制收缩行为
min-width 导致内容溢出或换行异常？注意内容尺寸与盒模型
min-width 的作用是“不让容器窄于指定值”，但它不会主动撑开内部文字或图片。如果内容本身（比如一个长单词、未设置 word-break 的英文段落、或一张大图）物理宽度超过 min-width，就会溢出或破坏布局。
典型现象：
– 文字不换行，横向滚动条出现
– 图片撑破容器，min-width 像没设一样
解决方向：
立即学习“前端免费学习笔记（深入）”；
- 对文本容器加
word-break: break-word或overflow-wrap: break-word - 对图片加
max-width: 100%和height: auto，防止它突破容器最小宽度 - 避免对
table元素直接设min-width，它的计算逻辑特殊，容易失效；改用table-layout: fixed+width控制
响应式中 max-width / min-width 与媒体查询怎么配合？
单独用 max-width 或 min-width 已能实现基础流体控制，但复杂场景下常和媒体查询协同。关键区别是：
– max-width 是“连续约束”，随容器缩放实时生效
– @media (max-width: ...) 是“断点触发”，只在特定视口宽度下切换整套规则
推荐组合策略：
- 用
max-width做主体容器的弹性封顶（如max-width: 1200px），保证大屏不无限拉宽 - 用
@media (max-width: 768px)改变布局结构（如从两栏变单栏），此时可重置max-width为100% - 慎用
min-width在媒体查询里“反向限制”，例如@media (min-width: 1024px) { .sidebar { min-width: 280px; } }—— 它会让小屏用户看到空缺区域，不如用display: none更稳妥
IE8 及更老浏览器不支持怎么办？
max-width 和 min-width 在 IE7 及以下完全无效，IE8 仅部分支持（max-width 对块元素基本可用，min-width 表现不稳定）。
如果必须兼容 IE8：
- 用 CSS expression（已废弃，仅作说明）：
width: expression(document.body.clientWidth > 960 ? "960px" : "auto");—— 不推荐，性能差且现代浏览器不支持 - 更现实的做法是：对 IE8 单独提供降级样式，例如用固定
width+!important覆盖弹性规则 - 真正需要支持老 IE 的项目，往往已引入 CSS 预处理器或构建工具，可用 PostCSS 插件自动补全 hack（如
postcss-minmax），但注意它只是模拟，非真实行为
现在绝大多数项目已放弃 IE8 支持，但若遇到遗留系统，要意识到：这些属性不是“加了就稳”，而是依赖浏览器渲染引擎的真实解析能力。
