max-width 必须配合 margin: 0 auto 才能居中，它本身只限制最大宽度而不控制位置；块级元素默认左对齐，需显式设置 margin: 0 auto 实现水平居中，且需确保父容器无干扰布局。
max-width 不配 margin: 0 auto 就等于没写
写了 max-width: 1440px 但内容还是贴左？不是 CSS 失效，是它根本没被设计成居中工具。max-width 只管“最多能多宽”，不管“放哪儿”。块级元素（比如 <main></main>）默认左对齐，浏览器不会因为你设了最大宽度就自动居中。
必须显式加 margin: 0 auto，浏览器才会计算左右外边距并均分剩余空间。别写 margin: auto——它会把上下 margin 也设为 auto，可能意外撑高容器高度，尤其在 flex 或 grid 父容器里容易引发错位。
-
max-width必须作用在块级元素上，不能直接写在上起效（部分浏览器默认有 margin，且语义上 body 就该是全宽根容器） - 推荐搭配
box-sizing: border-box，避免 padding/border 溢出最大宽度 - 别用
max-width: 100%：它只在父容器比自身窄时才起作用，对大屏完全失效
导航全宽 + 内容受限，HTML 结构不能套错层
常见错误是把 <nav></nav> 和 <main></main> 都塞进同一个带 max-width 的容器里，结果导航也被限制了宽度。正确做法是让它们平级兄弟：
-
<nav></nav>直接设width: 100vw或width: 100%，背景色/阴影自然铺满 -
<main></main>单独加max-width: 1440px+margin: 0 auto - 别给
加max-width；如果用了 Bootstrap，container类必须包裹内容，完全无效——它的 CSS 规则只匹配.container > *
表格、图片、下拉框这些“硬骨头”得单独治
它们天生抗拒收缩，max-width 往往被绕过，不是 bug，是渲染机制决定的。
<table>：单纯 <code>max-width: 800px没用，必须配合table-layout: fixed+<colgroup></colgroup>显式定义列宽；<col>要放在<table> 开始后、<code><thead> 前，顺序错就无效 <li> <code><img>、<iframe></iframe>：必须加max-width: 100%+height: auto，否则会强行拉宽父容器；如果要填满固定区域，还得加display: block+object-fit组合-
<select></select>：max-width只约束下拉触发框，不控制弹出菜单宽度；iOS Safari 下基本无效；可靠方案是换用 Choices.js 这类 JS 渲染的下拉组件 - 正文类内容（文章、文档）：
max-width: 72ch～80ch是黄金区间；1ch≈ 当前字体中 “0” 的宽度，天然匹配行宽，比像素值更适配可读性 - 通用容器（如布局 wrapper）：
max-width: 1280px～1440px覆盖主流 2K/4K 屏，留出左右呼吸感 - 慎用
max-width: 85vw：窗口缩放时实时重算，容易引发布局抖动；真要用，务必套在@media (min-width: 1200px)里
数值不能拍脑袋，ch 和 px 各有适用场景
max-width 设多少才合理？得看内容类型和阅读舒适度，不是越大越好。
最易被忽略的是：所有这些设置都依赖于父容器是块级且无干扰 margin/padding。一旦嵌套在 flex 或 grid 容器里，margin: 0 auto 可能失效，就得改用 justify-content: center 或 place-items: center 替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
