aside标签仅为语义容器，不自动呈现为侧边栏；其显示位置取决于CSS布局（如flex或float）与DOM顺序，且必须确保结构顺序与视觉顺序一致以兼顾可访问性。
aside 标签本身不等于侧边栏，它只是语义容器；真正决定“是否显示为侧边栏”的是 CSS 布局方式和 DOM 顺序。
为什么 aside 写在 HTML 里却没出现在右边？
浏览器对 aside 默认无任何定位、浮动或宽度控制。它会像普通块级元素一样垂直堆叠，占满整行宽度。
- 别指望只写
<aside></aside>就自动右置——必须配合 CSS（如display: flex或float: right） - 如果用
float: right，主内容区域（比如<article>）需加overflow: hidden或clear: both防止文字环绕错乱 - 现代推荐用
display: flex父容器：flex-direction: row+aside { flex: 0 0 280px; }+article { flex: 1; } - DOM 顺序影响键盘 tab 流：若
aside在<article>前面但视觉靠右，tab 键会先聚焦侧边栏——建议结构顺序与视觉顺序一致
博客侧边栏该放什么内容？哪些是错用？
语义优先：只有和当前文章有逻辑附属关系的内容才适合放进 aside。
- ✅ 推荐场景：术语解释、延伸阅读链接、作者简介、相关文章推荐、引用来源说明
- ❌ 错误用法：全局导航菜单、页脚小工具、纯广告横幅（未标注“广告”）、与当前文章无关的热门标签云
- ⚠️ 嵌套慎用：可在段落内用
aside解释某个技术词，但不要在里面再塞一个完整导航栏 - SEO 和可访问性依赖这个语义——屏幕阅读器会把
aside当作“可跳过区块”，滥用会导致信息丢失
移动端怎么让博客侧边栏收起又不破坏布局？
固定宽度侧边栏在小屏上直接隐藏会引发布局塌陷或留白错位，关键在于同步重置主内容的流式空间。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 用 class 切换状态：
.sidebar.collapsed { width: 0; overflow: hidden; }+.sidebar.collapsed + article { margin-left: 0; } - 避免只设
visibility: hidden或opacity: 0——宽度还在，主内容仍被挤偏 - 动画要用
transition: width 0.3s ease，不能只过渡透明度，否则点击区域仍在 - 响应式断点里必须同时改两处：
@media (max-width: 768px) { .sidebar { width: 0; } article { margin-left: 0; } }
用 position: sticky 让侧边栏随滚动固定，为什么有时失效？
position: sticky 不是万能胶，它依赖父容器高度和层叠上下文环境。
- 父容器必须有明确高度（如
min-height: 100vh），否则“粘不住” - 父级若有
transform、perspective或will-change，会创建新定位上下文，sticky 失效 - Safari 15.4+ 才修复部分偏移 bug，旧版可能错位，建议加
top: 1rem显式声明基准线 - 别在父容器上加
overflow: hidden，它会截断 sticky 元素的吸附行为
最易被忽略的是 DOM 顺序与视觉顺序的一致性，以及 aside 的语义边界——它不是“右边那块区域”的占位符，而是“与当前内容有关的附属信息”的声明。布局可以灵活，语义不能妥协。
