max-width必须配合margin: 0 auto才能居中，因max-width仅限制最大宽度而不控制位置；仅设max-width时内容左对齐、右侧留白。
直接用 max-width 就行，但得配对 margin: 0 auto
想让页面内容在大屏下不无限拉宽，只在一个宽度内居中显示，核心就是给最外层容器加 max-width 和 margin: 0 auto。不加 margin: 0 auto，元素只会左对齐，不会居中。
常见错误现象：写了 max-width: 1200px 但页面还是贴着左边；或者设置了但小屏下被撑开、横向滚动条出现。
-
max-width必须作用在块级元素上（比如<div>、<code><main></main>），不能直接写在上起效（默认是块级，但部分浏览器默认有 margin，需先重置） - 推荐搭配
box-sizing: border-box，避免 padding/border 溢出最大宽度 - 百分比值（如
max-width: 90%）基于父容器计算，不是视口；固定值（如max-width: 1440px）更可控 - 用
<div class="container">...</div>包住<main></main>或正文区域即可，别动<nav></nav>或<header></header> -
container-fluid是 100% 宽，没有最大宽度限制，别混淆 - Bootstrap 5+ 中
container默认 max-width 在 lg 断点是 960px，xl 是 1140px，xxl 是 1320px —— 这些值在不同版本有差异，别硬记，查文档或 inspect 元素看 computed style - 必须把
<colgroup></colgroup>放在<table> 开始后、<code><thead> 前，顺序错就无效 <li> <code><col style="width: 200px">比<th width="200"> 更可靠，后者在 modern layout 中可能被忽略 <li>如果某列要“弹性占剩余空间”，可用 <code><col style="width: 1fr">（仅现代浏览器支持），或退化为width: auto配合min-width/max-width - 确保文字容器是块级：默认
<p></p>、<div> 就行；如果是 <code><span></span>，得加display: inline-block或display: block - 加
word-wrap: break-word（旧写法）或overflow-wrap: break-word（标准写法），二者目前可等价使用 - 若还要截断加省略号，需三件套：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis，但此时max-width才真正“可见”
container 类不是万能的，别误套在
Bootstrap 的 container、container-xl 是 div 级别类，必须包裹内容，不能直接加在 标签上—— 不生效，因为 Bootstrap 的 CSS 规则只匹配 .container > * 或自身为块级容器的结构。
使用场景：快速搭建响应式内容区，省去手写媒体查询；但如果你需要导航栏全宽 + 内容受限，就不能整个页面都套 container。
表格里设 max-width 失效？关键在 table-layout
给 <table> 直接写 <code>style="max-width: 800px" 常常没反应，文字照常撑开整行。这不是 bug，是表格默认布局行为决定的：table-layout: auto 下，浏览器优先按内容定列宽，max-width 只作为“整体容器上限”，不约束内部单元格。
真正生效的组合是：table-layout: fixed + <colgroup></colgroup> + 显式列宽定义。
文字溢出不折行？max-width 单独不够
max-width 控制的是容器宽度，不是文字换行逻辑。纯文本段落（如 <p></p>）即使容器设了 max-width: 300px，遇到一长串无空格字符（比如 URL、base64、连续英文）仍会横向溢出。
必须补两样东西：一是让元素具备块级/弹性上下文，二是显式启用断词。
复杂点在于：同一页面里，导航栏要 100vw，内容区要 1440px max，侧边栏要固定 320px，而表格又要自适应又不能破框——这些约束互相牵扯，靠单一 max-width 解决不了，得靠分层容器 + 明确的 display 上下文 + table-layout 控制权收归 CSS。漏掉任一环，都会在某个设备或数据上突然崩掉。
