应使用 display: grid 或 display: flex 布局而非 ，因后者语义错误、响应式差、可访问性低；grid 适合三栏主结构，flex 用于组件级对齐，配合 min-width: 0 和 overflow-wrap: break-word 防撑破布局。
直接用 display: grid 或 display: flex 布局，别碰 <table> 做主结构——它语义错、响应式难、屏幕阅读器读不出来。<h3>为什么不能用 <code><table> 做 Wiki 页面主布局<p>Wiki 页面本质是「语义化文档流」：标题、段落、列表、引用、代码块、侧边目录、编辑按钮……这些不是二维数据关系，而是内容层级与交互意图。用 <code><table> 强行套格子，会导致：<ul><li><code><th> 和 <code><td> 被屏幕阅读器误读为“表格数据”，破坏可访问性<li>响应式断点一加，嵌套 <code><tr><td> 就塌缩错位，连 <code>colspan 都救不回来
<article></article> 和 <main></main> 语义丢失position: absolute 补丁，越补越脆
display: grid 适合 Wiki 的三栏经典结构
Wiki 页面常见布局是：左侧导航/目录 + 中间主内容 + 右侧元信息（如最后编辑时间、分类标签）。Grid 天然适配这种二维划分，且无需浮动或清除。
关键写法不是堆 grid-template-areas，而是用线性列定义：
article {
display: grid;
grid-template-columns: 240px 1fr 280px;
gap: 16px;
}
-
240px给左侧导航（固定宽，不随窗口缩放） -
1fr是主内容区（自动占剩余空间，文本流自然换行） -
280px给右侧元信息（避免过宽撑开，也方便@media下收起） -
gap替代margin，避免父子外边距合并导致的间距错乱
注意：IE11 不支持 Grid，若需兼容，得 fallback 到 Flex；但现代 Wiki 系统（如 MediaWiki 1.35+）默认已弃用 IE 支持。
display: flex 用于单行/单列组件级布局
Grid 管整体区域划分，Flex 管局部对齐——比如 Wiki 页面顶部的「页面标题 + 编辑按钮 + 历史按钮」一行内分布：
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
- 别只给子元素设
margin-left: auto来推右，那样在 flex 容器里语义弱、维护难 -
align-items: center确保按钮和 H1 垂直居中对齐，不用算line-height或padding-top - 如果编辑按钮在小屏要下移，加
flex-wrap: wrap+order控制重排顺序，比 media query 写两套更轻量
min-width: 0 是 Wiki 内容区最常漏掉的一行 CSS
Wiki 正文常含长 URL、代码片段或未换行的英文单词，而 Flex/Grid 默认不截断子元素。结果就是：1fr 区域被一个超长链接撑破，横向滚动条意外出现，右侧栏被挤到下一行。
修复只需一行：
.main-content {
min-width: 0; /* 触发 shrink-to-fit 行为 */
overflow-wrap: break-word;
}
- 没这句，
flex: 1或1fr在遇到不可折行内容时会失效 -
overflow-wrap: break-word是安全的断行策略，比word-break: break-all更尊重语义 - 这个组合在 MDN、Wikipedia、GitBook 等真实 Wiki 类站点中是标配，不是“可选优化”
真正麻烦的从来不是怎么画出三栏，而是让长文本、代码块、引用嵌套在不破坏布局的前提下，老老实实待在自己的格子里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
