max-width生效需父容器提供宽度参照系，否则无效；应重置body/html边距、用外层容器包裹并设max-width+margin:0 auto，或改用width:min(100%,450px)。
max-width 是控制响应式布局中元素“不撑破容器”的核心手段，不是设了就生效，关键在它和父容器、内容宽度三者之间的关系。直接给 body 或 div 加 max-width: 450px，往往没效果——因为它的父级（比如 html）默认是 width: auto，不限制空间，子元素再设 max-width 也无参照。
为什么 max-width 设了但没反应？
常见错误现象：max-width: 450px 写了，但元素在大屏上仍铺满整个视口；或者在小屏上被压缩得极窄，文字挤成一团。
根本原因在于：max-width 只限制“上限”，不提供“参照系”。它需要一个有明确宽度的父容器（或触发块级格式化上下文）才能起作用。
- 父容器没设
width或max-width，子元素的max-width就失去约束基准 - 元素是内联级（如
span），max-width默认无效，必须先设display: block或inline-block - 用了
float或position: absolute，脱离文档流后，max-width可能被忽略或行为异常 - 设置了
width: 100%同时又设max-width，但父容器本身宽度不可控（比如body在未设margin: 0时有默认边距）
如何让 max-width 真正生效？
最稳妥的做法是：用一个带 max-width 的容器包裹内容，并确保它居中、有明确宽度上下文。
- 给外层容器（如
.container）设width: 100%+max-width: 450px+margin: 0 auto - 务必重置
body和html的默认margin和padding，否则margin: 0 auto居中会失效 - 避免在同一个元素上同时写
width: 100%和max-width却不控制父级——不如直接写width: min(100%, 450px)（现代浏览器支持） - 若需兼容旧浏览器（如 IE11），
min()不可用，就老实用两层结构：<div class="wrapper"><div class="content">...</div></div>，.wrapper控制max-width，.content控制内边距和实际内容流
主内容区严格限制 450px 的典型写法
这不是单纯加个 max-width 就完事，而是要兼顾移动端堆叠、桌面端居中、不溢出、不缩得太小。
.main-content { width: 100%; max-width: 450px; margin: 0 auto; padding: 0 16px; }- 如果页面有侧边栏，不要对
main单独设max-width，而应在外层栅格容器（如 Bootstrap 的.container或自定义.layout）上统一控制 - 配合媒体查询，在小屏下移除
max-width或改用width: 100%，避免留白过大：@media (max-width: 768px) { .main-content { max-width: none; } } - 注意：450px 是内容可读性的经验阈值，不是绝对标准；若含代码块、表格等宽内容，需额外处理（如加横向滚动或
overflow-x: auto）
真正难的不是写那行 max-width: 450px，而是判断它该加在哪一层、父容器是否可靠、有没有被其他样式（比如 flex-basis 或 grid-column）悄悄覆盖。调试时优先检查计算后的 computed width，而不是只看声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
