固定宽度布局需显式设宽+margin: 0 auto居中+容器约束，缺一不可；margin: 0 auto仅对块级、有明确width的元素生效，父容器不能是inline或未设宽的flex容器。
固定宽度布局能精准控制元素尺寸和位置，但直接写 width: 960px 不一定居中，也不一定适配现代设备。关键在「显式设宽 + 主动居中 + 容器约束」三步缺一不可。
为什么 margin: 0 auto 有时不居中？
它只对块级、有明确宽度的元素生效，且父容器不能是 display: inline 或未设宽的 flex 容器。
- 常见错误：给
body直接加margin: 0 auto——body默认 width 是 100%，没固定值，auto就无效 - 典型陷阱：把
.container放在display: flex的父容器里，又没给父容器设width，此时百分比宽度解析失败 - 修复方式：确保容器是块级（如
div），并显式设置width（如960px或1200px），再加margin: 0 auto
max-width 比纯 width 更实用的场景
纯固定宽度在大屏上留白、小屏上溢出，而 max-width 可兼顾弹性与边界控制。
- 适用情况：内容区需要最大宽度限制（如
max-width: 1200px），但窗口缩小时能自然收缩到100% - 必须搭配
margin: 0 auto才能居中；仅设max-width不会自动居中 - 注意：若父容器（如
body）有默认margin，需先重置：body { margin: 0; }
表格固定宽度必须配合 table-layout: fixed 吗？
不一定。单纯设 width: 800px 就能让表格整体固定宽度，但列宽是否“可控”，才取决于 table-layout。
-
table-layout: auto（默认）：列宽由内容撑开，第一行文字长，整列就宽，容易变形 -
table-layout: fixed：列宽按<col>或第一行<th>/</th> <td> 的 <code>width属性计算，渲染快、行为可预测 - 关键前提：无论哪种模式，
<table> 自身必须有明确宽度（<code>width: 800px或width: 100%），否则fixed也无效移动端小屏下固定宽度布局怎么不溢出？
不是靠删代码，而是靠「截断 + 滚动 + 回退」三层兜底。
- 基础防护：给固定宽容器加
overflow-x: auto，让横向溢出可滚动（尤其适用于表格、代码块） - 内容截断：对文本列用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但前提是该列有明确宽度（来自<col>或 CSSwidth） - 终极回退：用媒体查询在
max-width: 768px下关闭固定宽，改用width: 100%或转为堆叠布局（如display: block）
固定宽度本身不难，难的是它和居中、响应式、表格渲染、移动端适配这几件事绑在一起时，任意一个环节漏掉显式约束，就会表现异常。最常被忽略的是：没有检查父容器是否“真正允许子元素居中”。
- 基础防护：给固定宽容器加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
