核心解法是max-width配margin: 0 auto实现限宽居中，因max-width仅限制最大宽度而不控制位置，块级元素默认左对齐；须避免加在body上、慎用百分比和vw单位，并分层处理导航与内容容器。
超大屏幕（如 4K/5K 显示器）下网页内容无限拉宽、阅读体验崩坏，核心解法不是“撑满”，而是“限宽 + 居中 + 分层控制”——max-width 必须配 margin: 0 auto，且不能直接写在 上。
为什么写了 max-width 但内容还是贴左边？
因为 max-width 只限制“最多能多宽”，不决定“放在哪儿”。块级元素默认左对齐，浏览器不会自动居中。常见错误包括：
- 只写
max-width: 1440px，漏掉margin: 0 auto - 把
max-width直接加在上——部分浏览器默认有margin，且语义上body应该是全宽根容器 - 父容器设了
text-align: center，误以为能居中块级子元素（它只对inline元素生效） - 写了
margin: auto而非margin: 0 auto——上下 margin 也会被设为 auto，可能意外撑高容器高度
max-width 设多少才合理？别拍脑袋
数值取决于内容类型和可读性，不是越大越好：
- 正文类内容（文章、文档）：
max-width: 72ch～80ch是黄金区间（1ch ≈ 当前字体中 "0" 的宽度），天然匹配人眼单行阅读舒适宽度 - 通用布局容器（如
<main></main>wrapper）：max-width: 1280px～1440px覆盖主流 2K/4K 屏，左右留出呼吸感 - 避免
max-width: 100%：它只在父容器比自身窄时才起作用，对大屏完全失效 - 慎用
max-width: 85vw：窗口缩放时实时重算，容易引发布局抖动；真要用，务必套在@media (min-width: 1200px)里
导航栏全宽 + 内容受限，HTML 结构怎么搭？
关键在层级分离：<nav></nav> 和 <main></main> 必须是平级兄弟，不能嵌套或共用同一容器：
-
<nav></nav>直接设width: 100vw或width: 100%，背景色/阴影自然铺满 -
<main></main>（或<div class="content">）单独加 <code>max-width: 1440px+margin: 0 auto - 别给
加max-width；如果用了 Bootstrap，container类必须包裹内容，完全无效——它的 CSS 规则只匹配.container > * <table>：单纯 <code>max-width: 800px没用，必须配合table-layout: fixed+<colgroup></colgroup>显式定义列宽；<col>要放在<table> 开始后、<code><thead> 前，顺序错就无效 <li> <code><img>、<iframe></iframe>等替换元素：必须加max-width: 100%+height: auto，否则会强行拉宽父容器-
<select></select>：max-width只约束下拉触发框，不控制弹出菜单宽度；iOS Safari 下基本无效；可靠方案是换用Choices.js这类 JS 渲染的下拉组件 - Flex/Grid 子项：
max-width在父容器未设flex-wrap: wrap或未定义min-width时，可能被忽略
表格、图片、下拉框这些“硬骨头”怎么治？
它们天生抗拒 max-width，得针对性处理：
真正麻烦的不是写 max-width，而是它生效的前提条件太多：块级、无默认 margin、父容器没干扰、子元素没溢出、替换元素额外加约束……漏掉任意一环，都会让“限宽”变成“摆设”。
