max-width不生效的主因是父容器无约束或元素display类型不支持；它仅对block、inline-block、flex、grid等生效，且需配合box-sizing、flex-shrink、内部溢出控制等才能正确作用。
max-width 不生效？检查父容器和 display 类型
最常见的情况是设了 max-width 但元素照旧撑满，根本原因是父容器没给约束，或者元素本身是 display: inline 或 display: table 这类不响应 max-width 的类型。
-
max-width只对block、inline-block、flex、grid等盒模型生效，inline元素（如<span>）直接忽略它 - 父容器如果用了
width: 100%+padding或border，又没设box-sizing: border-box，子元素的max-width可能被“挤出”视觉范围 - Flex 容器里的子项默认会拉伸，得加
flex-shrink: 1或显式设min-width: 0才能让max-width起作用
max-width 和 width 冲突时谁赢？
max-width 不是“强制宽度”，而是“上限”。当 width 值小于 max-width，实际宽就是 width；当 width 超过 max-width，才被截断为 max-width 的值。
- 写成
width: 100%; max-width: 400px;：小屏下按百分比缩，大屏到 400px 就停住 - 写成
width: 600px; max-width: 400px;：直接被压到 400px，width形同虚设 - 没写
width，只写max-width：元素按内容宽度自适应，但不会超过该值 —— 这才是最常用也最安全的写法
响应式中用 rem/vw 还是 px？
单位选错会导致 max-width 在缩放或换设备时行为反直觉。比如用 px 在高 DPR 屏上显得小，用 vw 又可能随视口狂变。
-
px最稳妥，适合固定尺寸控件（如按钮最大宽度、卡片宽度封顶） -
rem配合根字体缩放，适合需要跟随用户系统字号调整的场景（如文章正文区域） -
vw要慎用：max-width: 80vw在窄屏下可能只有 200px，内容被严重压缩；建议搭配min-width一起用 - 现代写法倾向用
clamp()替代单一max-width，例如width: clamp(320px, 90%, 1200px);，但注意 Safari 13.4+ 才稳定支持
图片和文本溢出时 max-width 够用吗？
max-width 对块级容器有效，但对内部的长单词、未折行文本、超宽图片，它管不了 —— 这些东西会直接撑破容器。
立即学习“前端免费学习笔记（深入）”；
- 图片加
max-width: 100%; height: auto;，否则max-width在父容器上无效 - 长英文/数字串用
word-break: break-word或overflow-wrap: break-word - 中文一般不断字，但遇到超长无空格 URL，仍需
overflow-wrap: break-word - 表格列宽失控？得额外设
table-layout: fixed+td { max-width: 0; overflow: hidden; }才能真正卡住
max-width 是个“软上限”，它不改变盒模型本质，也不解决内部溢出——这两点最容易被当成万能解。 
