只写max-width不生效，因块级元素默认width:auto，max-width仅在有明确width（如width:100%）时才起约束作用；需width:100%+max-width+margin:0 auto组合使用，且确保父容器有宽度约束链。
直接用 max-width 配合 width: 100%，而不是只写 max-width 或只写 width: 100% —— 否则在多数场景下它根本不会按你预期收缩。
为什么只写 max-width: 1200px 不生效？
块级元素默认 width: auto，此时 max-width 实际上不参与计算：它只在元素有明确宽度（比如 width: 100% 或具体像素值）时才起约束作用。常见现象是——设了 max-width: 768px，但容器在小屏依然撑满整行，毫无响应效果。
- 必须显式设置
width: 100%（或width: auto在某些上下文中也行，但不如100%可控） - 如果父容器本身没宽度限制（比如
display: flex且未设flex-shrink: 0），width: 100%会参考一个“无限宽”的父级，导致max-width失效 - 检查 DevTools 的
Computed面板，确认最终解析出的width值是否大于max-width；如果是，说明约束被绕过了
max-width: 100% 和 max-width: 100vw 哪个更稳？
max-width: 100% 更可靠，尤其在嵌套、缩放、iframe 或存在滚动条的页面里。100vw 是视口总宽（含滚动条宽度），在右侧出现垂直滚动条时，100vw 会略大于可见区域，容易触发意外横向滚动。
-
max-width: 100%基于父容器宽度，层级清晰，适合大多数容器布局 -
max-width: 100vw仅建议用于顶层全宽容器（如header、footer），且需搭配overflow-x: hidden防溢出 - 移动端 Safari 旧版本（≤ iOS 15.4）对
vw在缩放后计算有偏差，%更兼容
如何让容器在小屏占满、大屏居中定宽？
这是最常用模式，核心就是三行组合：width: 100% + max-width + margin: 0 auto。它不依赖媒体查询，天然响应。
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
-
width: 100%确保小屏下填满可用空间 -
max-width: 1200px是“天花板”，大屏下不再扩张 -
margin: 0 auto只对width小于父容器的块级元素生效，正好匹配这个场景 - 别漏掉
padding：纯靠max-width控制内容可读性不够，ch单位（如max-width: 85ch）更适合正文行宽控制
Flex/Grid 子项里 max-width 为啥不工作？
Flex 和 Grid 的弹性分配机制默认会忽略 max-width，除非显式释放压缩权限。典型表现是：子项设了 max-width: 300px，但父容器一收缩，它就被强行压窄甚至换行。
- Flex 子项加
min-width: 0或flex-shrink: 0，才能让max-width参与约束 - Grid 子项同理，
min-width: 0是关键，否则浏览器按内容最小宽度（auto）保护它 - 图片等替换元素（
<img>）天然支持max-width，但放在 Flex/Grid 里仍需加min-width: 0
真正容易被忽略的是宽度链路：从目标元素往上数，只要某一级祖先没设宽度约束（比如 position: absolute、display: flex 无 flex-basis、或父级 width 是 auto），max-width: 100% 就失去参照系。这时候不是属性写错了，而是整个宽度上下文断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
