侧边栏需语义与布局双到位：用<aside>标识附属内容，Flexbox控制布局（flex: 0 0 240px+flex: 1），配合aria-*属性和z-index保障可访问性与交互一致性。
HTML 模板里生成侧边栏，核心不是“模板生成”，而是「结构语义 + 布局控制」双到位。只写 <aside> 标签不会自动出现侧边栏，不加 CSS 就永远是上下堆叠的普通块；反过来，只靠 float 或 position: absolute 实现视觉侧边，又会丢失语义和可访问性。
用 <aside> 还是 <div>？先看内容是否附属性
判断标准就一条：这块内容是否与附近 <main> 或 <article> 有逻辑附属关系？
- 是延伸阅读、作者简介、术语解释、相关广告（需标注）→ 用
<aside> - 是全局导航菜单、页脚小工具、纯装饰区块 → 用
<div>，别硬套<aside> - 放在 HTML 结构里
<main>前面，但视觉要靠右 → 键盘 tab 顺序会错乱，得用order或aria-flowto补救
Flexbox 布局下怎么让侧边栏不挤占主内容宽度？
手动写 margin-left: 250px 是最易出错的做法——响应式断点一换，所有 margin 都得重调。Flex 才是解耦尺寸的正解。
- 父容器设
display: flex; gap: 1.5rem; - 侧边栏设
flex: 0 0 240px;（不伸展、不收缩、固定宽） - 主内容区设
flex: 1;，它会自动填满剩余空间，且不受屏幕缩放影响 - 避免在父容器上加
overflow: hidden或transform，否则position: sticky会失效
移动端侧边栏为什么点不开或滚动卡顿？
真机测试常暴露两个隐藏问题：iOS Safari 的 fixed 渲染缺陷，和遮罩层 z-index 覆盖。
立即学习“前端免费学习笔记（深入）”；
- 侧边栏用
position: fixed时，必须确保父容器没设overflow: hidden，否则 iOS 上会“粘住不动” - 加
-webkit-overflow-scrolling: touch;和overflow-y: auto;到侧边栏内部容器，否则长列表滚动生涩 - 检查是否有轮播图、广告 SDK 插入了
z-index: 9999的遮罩层——侧边栏至少要z-index: 1000才能 clickable - 别用
style.display = 'none'控制开关，改用classList.toggle('is-open')，否则 CSS 过渡动画直接失效
为什么 <aside> 写对了，但屏幕阅读器还是读不出用途？
语义标签只是起点，可访问性补全靠属性和上下文。
-
<aside>默认被读作 “complementary landmark”，但如果里面全是广告链接，得加aria-label="广告区域"明确用途 - 如果侧边栏含导航菜单，当前项要用
aria-current="page"标记，而不是只靠 CSS 类高亮 - 展开/收起按钮必须带
aria-expanded和aria-controls，否则视障用户无法感知状态变化 - 别依赖
title属性做提示——它在触摸设备上不触发，且部分读屏器忽略
真正难的不是写出侧边栏，而是让它的语义、布局、交互、可访问性在各种设备和辅助技术下保持一致。一个 flex: 0 0 240px 可能解决宽度问题，但 aria-current 和 z-index 才决定它是否真正可用。
