是语义标签而非布局指令，需配合 flexbox/grid、显式尺寸、transform 动画及 js 实现完整侧边栏功能。
直接用 <aside></aside> 标签加 CSS Flexbox 或 Grid 实现可折叠侧边栏，不需要 JS 也能完成基础开关；但真要平滑动画、响应式适配、状态记忆，JS 不可避免。
为什么不能只靠 <aside></aside> 自动出侧边栏
<aside></aside> 是语义标签，不是布局指令。浏览器默认把它当普通块级元素渲染：宽度 100%、垂直堆叠、无定位。写了 <aside>菜单</aside> 却没配 CSS，它就老老实实蹲在主内容下面——这是最常被忽略的前提。
- 必须给父容器设
display: flex或display: grid，否则<aside></aside>和<main></main>永远不会并排 -
<aside></aside>必须显式设尺寸（如flex: 0 0 240px），否则窄屏下可能撑破容器或缩成一条线 - 嵌套位置影响语义：与
<main></main>并列是全站侧边栏；嵌在<article></article>内是局部辅助内容
折叠动画该用 transform: translateX() 而不是 width
用 width: 0 → width: 240px 做过渡，会触发重排（reflow），文字随宽度变化反复换行，动画卡顿且不可控。而 transform: translateX(-100%) 只改变渲染层位置，走 GPU 加速，不干扰布局流。
- 隐藏时写
transform: translateX(-100%)，不是left: -240px（后者仍占文档流空间） - 必须配合
position: fixed或position: absolute，否则侧边栏会把主内容挤走 - 过渡只写
transition: transform 0.3s ease，别用transition: all，避免隐式属性干扰 - 移动端记得加
touch-action: pan-y，防止手势滑动时误触发页面滚动
JS 绑定点击事件前先确认三件事
按钮点不动？90% 是 DOM 加载时机或选择器错位导致的。不是逻辑问题，是执行环境没对齐。
- JS 要么放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
