HTML语义结构错误是布局失效的根本原因，如header错位、footer不贴底、侧边栏崩坏；必须先规范使用<header><nav><main><aside><footer>等标签，再分层应用Flex布局。
HTML结构语义错了，CSS再怎么调都白忙
很多新手一上来就猛写 display: flex 或狂加 float: left，结果 header 跑到 main 下面、footer 不贴底、侧边栏宽度算崩——问题不在 CSS，而在 HTML 骨架没搭对。
必须先理清每个语义化标签的职责：
-
<header>只放站点标识、主标题，别塞导航菜单（那是<nav>的事） -
<main>必须且只能有一个，它代表当前页面的核心内容，不是“右边那个 div” -
<aside>是与当前内容相关但非核心的辅助信息（比如文章页的“相关推荐”），不是全站通用广告栏 - 避免无意义嵌套：
<div><div><p>文字</p></div></div>→ 直接用<section><p>文字</p></section>
Flex 布局该在哪一层设容器？
常见错误是把 display: flex 直接加在 <body> 上，结果 header 和 footer 被强行拉伸、高度失控。正确做法是分层设容器：
- 外层用
flex-direction: column控制垂直流向：.page { display: flex; flex-direction: column; min-height: 100vh; } -
<main>单独设为 flex 容器，实现左右分栏：main { display: flex; flex: 1; } - 侧边栏固定宽、内容区自适应：
aside { width: 240px; }+section { flex: 1; }（不用写flex: 1 1 auto，默认值已足够） - 如果旧代码混用了
float，务必加overflow: hidden或display: flow-root到父容器，否则 flex 子项可能被 float 元素干扰
box-sizing: border-box 是不是必须全局写？
是的，必须写，而且要放在最前面。不初始化盒模型，极易出现左右留白、区块错位、响应失效等问题。
立即学习“前端免费学习笔记（深入）”；
高分/生产级代码标配：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}原因很简单：box-sizing: border-box 让宽高包含 padding 和 border，布局尺寸可预测；否则用 content-box（默认），你设 width: 300px，再加 padding: 20px，实际占满 340px，容器直接撑破。
Grid 真的比 Flex 更适合三栏布局吗？
不一定。简单三栏（header / sidebar+content / footer）仍推荐 Flex：语义清晰、IE11 都支持、调试直观。Grid 真正优势在于二维控制，比如需要同时约束行列时才值得上：
- 头部跨两列、侧边栏固定行高、内容区自动填满剩余空间
-
grid-template-columns: 240px 1fr 320px;+grid-template-rows: auto 1fr auto; - 误用
grid-template-areas写一堆字符串，改一个区域名就要同步修七八处，维护成本陡增
新手最容易忽略的是：Flex 处理一维（行或列），Grid 处理二维（行列同时）。别为了“听起来高级”而过早引入 Grid，尤其当结构还没稳定、需求还在变时。
