九宫格布局优先用CSS Grid，核心是grid-template-columns: repeat(3, 1fr)配合gap控制间距，避免margin计算与换行问题；老项目兼容IE8则退守float+margin组合。
没有“万能布局方法”，不同结构目标必须匹配对应技术路径：九宫格用 display: grid 最干净，垂直居中靠 flex 三要素缺一不可，老项目兼容 IE8 则只能退守 float + margin: 0 auto 组合。
九宫格布局优先用 CSS Grid 而非 float 或 table
早期用 float 模拟九宫格要清浮动、算 margin、处理换行错位，现在直接用 grid 一行定义列数和间距即可。
-
display: grid配合grid-template-columns: repeat(3, 1fr)就是标准三列等宽九宫格 - 加
gap: 10px替代手动设 margin，避免子元素自身 margin 叠加导致尺寸失控 - 别在 grid 容器上设
width: 100%却漏掉max-width—— 小屏下会溢出，响应式应写成max-width: 1200px; width: 100% - IE11 支持
grid但不支持gap，得用grid-column-gap和grid-row-gap分开写
垂直居中失效？先检查父容器有没有可参考的高度
align-items: center 不是魔法，它依赖父容器有明确高度空间。常见失效不是代码写错，而是父容器塌陷或没设高。
- 如果父容器是
div且子元素全是浮动或 inline，它默认高度为 0 —— 此时align-items无处可居中 - 用
min-height: 100vh比height: 100vh更安全，避免内容超长时被截断 - 别在
body直接加display: flex—— 它会让所有一级子元素（比如header、main）变成 flex item，破坏原有文档流和语义结构 - 旧版 Safari（iOS 9–10）需补
-webkit-align-items: center
table 布局还在用？请确认你真需要它
<table> 用于展示表格化数据完全合理，但拿它做页面整体布局，等于主动放弃语义、响应式和可访问性。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>屏幕阅读器会把 <code><table> 布局读成“一个有 3 行 2 列的表格”，而非“头部、侧边栏、主内容”
<li>
<code>table-layout: fixed 虽能提升渲染性能，但它锁定列宽，width: 100% 在小屏下照样撑破容器
display: table-cell 是更轻量的替代方案，但现代项目建议统一用 grid 或 flex
<table> 标签，此时应靠 CSS 重置样式，而不是沿用其布局逻辑
<p>真正难的不是写出能跑的布局，而是判断哪个场景该用哪个方案——比如九宫格卡片是否要等高？是否需支持拖拽重排？是否要适配键盘导航？这些细节会直接决定你从第一行 <code>display 开始就该选 grid 还是 flex，而不是等写完才发现语义或可访问性崩了。
