flex适合单向顺序布局（如header+main+sidebar+footer），grid适合二维坐标布局；关键在父容器设display:flex/grid，子元素用对应属性控制，避免误用绝对定位或表格做主结构。
用 display: flex 做响应式主容器布局最直接
现代页面主结构（如 header + main + sidebar + footer）用 Flex 布局比浮动或定位更可控，也避免了清除浮动的麻烦。关键不是“怎么写”，而是「父容器设 display: flex，子元素用 flex 相关属性控制尺寸和顺序」。
常见错误是只给子元素设 flex: 1 却忘了父容器没开 Flex 上下文，结果完全无效。
-
flex-direction: row（默认）适合横向导航栏；column更适合移动端首屏堆叠 - 侧边栏固定宽、内容区自适应？用
flex: 0 0 240px（不缩放、不增长、宽240px）+flex: 1配合 - 注意
min-width: 0—— 当子元素含长文本或 URL 时，Flex 默认不截断，加这句才能触发overflow: hidden生效
Grid 布局适合复杂区域划分，但别一上来就套 grid-template-areas
grid-template-areas 写起来直观，但维护性差：只要改一个区域名字，所有相关项都要同步更新；而且没法动态插入新区域。实际项目中，更推荐用线性定义 + grid-column / grid-row 显式控制。
比如三栏布局，用 grid-template-columns: 240px 1fr 320px 比命名区域更清晰，也方便后续加 @media 调整列数。
立即学习“前端免费学习笔记（深入）”；
- 用
gap替代 margin 实现栅格间距，避免父子 margin 合并问题 - Grid 容器内子元素默认不继承
text-align，居中需单独对齐：justify-self: center或place-self: center - IE11 不支持 Grid（哪怕加前缀），如果还要兼容，得 fallback 到 Flex 或 float
绝对定位（position: absolute）只该用于脱离文档流的浮层
把它当布局主力是危险的：父容器没设 position: relative，子元素会相对于 viewport 定位；宽度高度不随内容撑开，容易遮挡或错位；还可能破坏可访问性（屏幕阅读器读序混乱）。
真正该用它的场景极少：气泡提示、加载遮罩、右下角悬浮按钮、模态框 overlay。
- 必须确保父容器有
position: relative或其他非static值，否则定位基准不可控 - 避免同时设
top和bottom（除非明确要拉伸高度），浏览器行为在不同 zoom 级别下可能不一致 - 用
inset（如inset: 16px）替代四个方向单独写，更简洁，但 Safari 15.4 以下不支持
表格布局（<table>）不是过时，而是用错了地方
<p>表格语义是「二维数据关系」，不是「让元素横平竖直」。用它做页面大布局，会导致 HTML 结构嵌套深、语义混乱、响应式困难，且 SEO 和无障碍支持差。</p>
<p>但真遇到需要行列对齐的报表、价目表、课程表，<code><table> 仍是唯一合理选择 —— 它天然支持列宽自动均分、表头冻结（<code><thead>）、跨行跨列（<code>rowspan/colspan）。
- 禁用
border-collapse: collapse 时，border-spacing 才生效；想取消间隙，设 border-spacing: 0
- 用
scope="col" 或 scope="row" 标注表头，能显著提升屏幕阅读器体验
- 不要为了“看起来像表格”而用
display: table-cell 模拟 —— 这类 hack 在 Flex/Grid 成熟后已无必要
<style>
.responsive-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: 16px;
}
@media (max-width: 768px) {
.responsive-grid {
grid-template-columns: 1fr;
}
}
</style>
Flex 和 Grid 的边界其实很清晰：单向分布选 Flex，二维网格选 Grid。但很多人卡在「该用哪个」上，其实是没先想清楚——这个容器里，元素间是「顺序依赖」还是「坐标依赖」。前者 Flex 天然合适，后者 Grid 才不绕弯。
border-collapse: collapse 时，border-spacing 才生效；想取消间隙，设 border-spacing: 0
scope="col" 或 scope="row" 标注表头，能显著提升屏幕阅读器体验display: table-cell 模拟 —— 这类 hack 在 Flex/Grid 成熟后已无必要
