max-width 需配合 width（如 width: 100% 或 width: fit-content）和 display（如 inline-block）才能避免塌陷或溢出；margin: 0 auto 仅对有明确宽度的静态块级元素有效，Flex/绝对定位/行内元素需其他居中方式。
max-width 怎么写才不会让盒子塌陷或溢出
直接设 max-width 但没配 width 或 display，盒子可能还是撑满父容器——因为块级元素默认宽度是 auto，而 max-width 只是“上限”，不强制收缩。
常见错误现象：max-width: 600px 写了，但内容少时盒子窄、内容多时又突然变宽（比如图片或长单词撑开）；或者在 Flex 容器里完全不生效。
- 必须搭配
width: fit-content或display: inline-block才能让盒子“收身”到内容宽度，再受max-width约束 - 更稳妥的做法是：设
width: 100%+max-width: 600px，这样既能响应式收缩，又不会小于内容所需最小宽度 - 注意
box-sizing: border-box要提前设好，否则 padding 和 border 会额外加在max-width之外，导致实际宽度超标
margin: 0 auto 居中为什么有时无效
margin: 0 auto 只对「有明确宽度」且「非浮动、非绝对定位、非 Flex 子项」的块级元素生效。它不是万能居中开关。
使用场景：常规文档流中的卡片、文章容器、表单盒子等需要水平居中的块。
立即学习“前端免费学习笔记（深入）”；
- 如果父容器是
display: flex，子元素的margin: 0 auto会被忽略，改用justify-content: center - 如果盒子是
position: absolute，需配合left: 50%+transform: translateX(-50%) - 行内元素（如
span）即使设了max-width和margin: 0 auto也无效，得先display: block或inline-block
响应式中 max-width 和 width 混用的坑
很多人用 width: 100% + max-width: 800px 做响应式容器，但遇到图片、表格或预格式化文本（<pre>）时，仍会突破限制。
这是因为这些元素默认 white-space: nowrap 或 min-width: auto，会优先保持自身尺寸。
- 给图片加
max-width: 100%+，防止溢出</li> <li>给 <code><table>
加table-layout: fixed，再配width: 100%，否则max-width对表格无效 - 对
<pre>或代码块，加overflow-x: auto和word-break: break-all（慎用，影响可读性），或更推荐white-space: pre-wrap
IE8–IE11 下 max-width 的兼容细节
max-width 在 IE8+ 都支持，但有两个隐藏雷区：
错误现象：盒子在 IE9/10 下居中失效，或 max-width 表现为固定像素不随视口缩放。
- 必须声明标准模式：HTML 顶部要有
<!DOCTYPE html>，否则 IE 进入怪异模式，max-width当成width处理 - IE9–10 不支持
fit-content，所以别写width: fit-content; max-width: 600px，换成width: 100%; max-width: 600px - 如果用了
display: inline-block配合max-width，IE8 下需触发 hasLayout（例如加zoom: 1）才能正确计算宽度
max-width 本身，而是它和 width、display、box-sizing、父容器布局方式之间那几处隐性耦合。 
