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 像没设一样
解决方向：
立即学习“前端免费学习笔记（深入）”；
