max-width 单独使用无效，必须配合 width 或特定 display 类型才能生效；常见原因是元素 width 为 auto 或父容器无宽度约束，需通过 computed 样式确认 width 实际值及 max-width 是否激活。
max-width 单独写几乎总是无效的——它必须配合 width 或 display 类型才能真正约束盒子尺寸。
为什么 max-width: 600px 写了却没反应
常见错误是只设 max-width: 600px，但元素仍是默认块级行为（width: auto），此时它会撑满父容器，max-width 只是“上限”，不主动收缩。
- 检查 computed 样式里
width的实际值：如果是auto或大于600px的像素值，max-width就不会介入 - 父容器本身没宽度约束（比如未设
width的<body>或浮动父级），子元素即使有max-width也可能被内容撑开 - 元素是
display: inline（如<span>）、table或某些 Flex 子项，默认不响应max-width - 被其他规则覆盖：比如
width: 100%和max-width: 600px同时存在时，width计算值若 ≤ 600px，max-width就不生效；若 > 600px，它才起作用
怎么写才让 max-width 真正起作用
关键不是加 max-width，而是控制它的“生效上下文”。
- 对常规块级容器（如
<div class="container">）：用width: 100%+max-width: 1200px+margin: 0 auto—— 这样小屏收缩、大屏兜底、还能居中 - 对图片等替换元素：
img { width: 100%; max-width: 100%; height: auto; }，max-width: 100%是相对于父容器，不是像素值 - 对 Flex 子项：默认
flex-shrink: 1会压缩内容，绕过max-width；需显式加flex-shrink: 0或min-width: 0 - 对 Grid 子项：避免只用
1fr，改用minmax(0, 600px)或clamp(320px, 50%, 960px)
响应式中 max-width 和 width 混用的坑
很多人以为 width: 100% + max-width: 800px 就万事大吉，但实际会遇到这些情况：
立即学习“前端免费学习笔记（深入）”；
-
<table>默认忽略max-width，得额外加table-layout: fixed - 长单词或 URL 不会自动折行，导致盒子被撑宽 —— 需配
word-break: break-word或overflow-wrap: break-word - 在有滚动条的页面里，
max-width: 100vw可能比视口还宽（因为vw包含滚动条宽度），应优先用max-width: 100% - Flex 容器内设
margin: 0 auto对子项无效，justify-content: center才是正解
调试时最该看哪里
别只盯着你写的那行 CSS。打开 DevTools 的 computed 面板，展开 used values，重点确认三件事：
-
width最终解析成什么？是auto、百分比还是具体像素？ -
max-width是否被标记为 “active”？有没有被更高优先级规则覆盖？ - 父容器的
display是什么？是否是flex、grid或inline？这直接决定max-width能不能参与计算
真正难的不是写出 max-width: 1200px，而是搞清它在哪一层布局逻辑里被绕过、被覆盖、或根本没被触发——盒子的 display 类型、父容器的布局模式、甚至滚动条是否存在，都会悄悄改写它的表现。
