语义化标签搭配css实现清晰布局：用html5语义标签明确结构，css通过flexbox或grid控制样式，重置默认值、按需定义角色，严格区分语义与样式职责。
直接用语义化标签写结构，再配合适的 CSS，就能做出清晰、易维护又兼容现代浏览器的布局。关键不是堆样式，而是让标签各司其职，CSS 负责把它们“摆到位”。
先重置默认行为，再定义角色
HTML5 语义标签（header、nav、main、aside、footer等）本身没有视觉样式，只带极简的默认 margin/padding，而且不同浏览器可能略有差异。
- 统一用 * { margin: 0; padding: 0; box-sizing: border-box; } 开头清掉干扰
- 单独为 header、nav 等设背景、内边距、文字颜色，而不是依赖它们“天生该什么样”
- 别假设 nav 会自动横排——得写 display: flex 或 display: inline-block 才行
用 Flexbox 快速组织主干流式布局
现代页面多数是横向导航+纵向内容流，Flexbox 天然适合这种一维排列，不用浮动也不用清除。
- header 里放 logo 和 nav：给 header 设 display: flex; align-items: center; justify-content: space-between;
- nav 内部菜单项：用 display: flex; gap: 1.5rem; 替代老式 float + margin，间距更可控
- 主内容区常见“主栏 + 侧栏”结构：把 main 和 aside 包进一个容器，设 display: flex; gap: 2rem;，再分别控制宽度（如 main 占 70%，aside 占 30%）
用 Grid 构建复杂区域划分
当页面有明确的网格感（比如首页多区块错落、卡片矩阵、仪表盘），CSS Grid 比 Flexbox 更直观。
- 整个页面骨架可设为 body { display: grid; grid-template-areas: "header header" "nav main" "footer footer"; }
- 再给每个语义标签加 grid-area：例如 header { grid-area: header; }、nav { grid-area: nav; }
- section 或 article 内部做卡片网格：直接设 display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem;
注意语义与样式的边界
标签管“它是什么”，CSS 管“它长什么样”。混用或误用会削弱结构价值。
- main 只能出现一次，且不能嵌套在 article 或 section 里——它代表整页唯一核心内容区
- aside 不是“随便放右边的盒子”，它得和邻近的 article 或 section 有逻辑关联（比如作者简介、延伸阅读）
- 想加圆角、阴影、hover 效果？全交给 class 控制，比如 ，而不是给所有 article 统一加样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
