个人中心侧边栏需在语义、布局、响应式、焦点流四层面严丝合缝：导航用nav包裹可交互元素，辅助信息放aside；推荐grid布局；滚动失效多因高度约束冲突；高亮需JS动态匹配pathname并设aria-current="page"；必须保障Tab键顺序焦点流。
个人中心侧边栏不是“加个aside再float一下”就能跑通的，它必须和主内容区在语义、布局、响应式、焦点流四个层面严丝合缝——否则点击“修改密码”后焦点丢失、小屏下菜单被截断、屏幕阅读器读不出当前页状态，都是大概率事件。
用nav还是aside？别混着用
侧边栏里放的是导航链接（如“基本信息”“安全设置”“绑定账号”），那就必须用nav包裹；如果里面还塞了“最近登录设备”“系统公告”这类辅助信息，才在nav外另起一个aside。两者语义不同：nav是操作入口集合，aside是非核心但相关的内容块。
-
nav内只放可交互元素：a、button，禁用div模拟链接 - 每个
a必须有明确href，即使当前页也写href="#"并用event.preventDefault()控制跳转逻辑，否则键盘用户按回车会刷新页面 - 若侧边栏同时含导航+辅助信息，结构应为：
<aside><nav>...</nav><section>...</section></aside>
display: grid比float或flex更稳的三个原因
个人中心页面结构固定（左栏窄、主区宽、右栏可选），grid能一次性定义区域关系，避免浮动塌陷、flex换行符空格干扰、媒体查询反复重写布局规则。
- PC端推荐写法：
grid-template-columns: 240px 1fr，左侧固定宽，右侧自适应，不用计算减法 - 移动端直接改
grid-template-rows: auto 1fr，再用grid-row把nav设为第一行，主内容第二行，不碰DOM结构 - IE11需降级？用
display: flex; flex-direction: column替代，别退回float——后者在嵌套padding或border时高度计算极易出错
侧边栏滚动失效？检查这三处硬编码值
当菜单项超过视口高度，滚动条不出现或滚动后内容消失，问题往往不在overflow本身，而在高度约束冲突。
- 父容器（比如
body或.app）没设min-height: 100vh，导致calc(100vh - 64px - 48px)算出来是负数 -
nav上写了position: fixed但漏了bottom，浏览器按auto算高，内容少时直接塌缩 - 用了
scrollbar-gutter: stable both-edges却没配overflow-y: auto，滚动条出现时布局仍会偏移
“当前页高亮”不能靠CSS伪类，得靠JS动态判断
:target或:hover都解决不了真实路由匹配，必须用window.location.pathname比对。
- 不要在所有链接上硬写
class="active"，服务端渲染时容易漏，前端切换路由后也不会自动更新 - 简单可靠的做法：页面底部加一段
<script></script>，遍历nav a，匹配pathname后给对应a加aria-current="page"和class="active" - 注意路径末尾斜杠：
/profile/和/profile要统一处理，否则高亮失效
最常被忽略的是焦点管理——侧边栏nav里的a必须能被Tab键顺序访问，且进入子菜单时焦点不能跳到页面顶部；这点在用contenteditable或tabindex="-1"乱加的地方尤其容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
