nav和aside必须配合css布局（如flex/grid）才能实现正确位置，仅用标签不会自动贴边或横排；nav需display:flex实现横排导航，aside需flex或position:fixed配合main腾出空间，且须响应式适配。
nav 和 aside 必须配合明确的 CSS 布局控制，否则默认会堆叠或错位，不是加了标签就自动“顶着”“贴着”。
顶部导航栏必须用 nav + display: flex
只写 <nav><a>首页</a><a>关于</a></nav> 不会自动横排。浏览器默认把 a 当行内元素，但换行、间距、对齐全不可控。
必须显式设 nav { display: flex; }，再配 nav ul { list-style: none; margin: 0; padding: 0; } 和 nav li { display: inline-block; } 或直接 nav a { flex: 1; }。
常见错误：float: left 在现代布局中容易脱离文档流，导致后续 aside 上浮或重叠；inline-block 有空格缝隙，缩进 HTML 就会漏白。
侧边栏固定位置得靠 position: fixed 或 Flex 容器划分
纯靠 float 或 margin-left 推主内容，一滚动就错位，尤其在 nav 固定在顶部时。
推荐两种方案：
• 方案一（语义清晰）：用 body { display: flex; flex-direction: column; }，把 nav 设为固定高度，main 和 aside 包在一个 div class="layout" 里，再用 display: flex 水平分栏
• 方案二（兼容老浏览器）：aside { position: fixed; top: 60px; left: 0; width: 200px; height: calc(100vh - 60px); }，但得手动算 nav 高度，且移动端需 media query 覆盖
容易踩的坑：position: fixed 的 aside 会脱离文档流，main 内容得靠 margin-left: 200px 手动腾出空间，否则被遮挡
aside 和 main 的宽度别硬写像素值
写死 width: 220px 看似省事，但不同屏幕下侧边栏可能过宽或过窄，主内容区域响应失衡。
更稳妥的做法：
• 侧边栏用 flex: 0 0 220px（不伸缩、不压缩、基础宽 220px）
• 主内容用 flex: 1，自动撑满剩余空间
• 加媒体查询：@media (max-width: 768px) { .layout { flex-direction: column; } aside { position: static; width: 100%; }
注意：flex-basis 值要和实际内容匹配，如果侧边栏文字多、图标大，220px 可能换行，得同步调高或加 white-space: nowrap
导航链接跳转失效或样式丢失的典型原因
常见现象：nav 里的 a 点击没反应、悬停无变色、移动端点不中。
排查要点：
• href 值是否为空或仅 "#"？真实跳转需指向有效路径，如 href="/about" 或锚点 href="#section2"
• 是否被父级 overflow: hidden 或 z-index 层级压住？尤其 position: fixed 的 nav 和 aside 容易互相遮挡
• :hover 样式是否写在 a:hover 而非 li:hover a？后者才能保证鼠标移入 li 区域就触发
• 移动端 touch 区域太小，没设 padding 或 min-height，iOS Safari 默认点击热区仅限文字本身
真正麻烦的不是写出来，是让 nav 固定在顶、aside 不随滚动跑偏、main 内容不被遮又不溢出——这三者之间的尺寸耦合和层叠顺序，稍动一个就得全盘校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
