aside标签无布局功能，仅表语义；位置决定服务范围，嵌套article内则绑定该文，与main并列则属全站级；需用css（flex/grid）实现侧边效果，禁用display:none隐藏，小屏应自然下移。
aside 标签本身不会让内容出现在侧边，它只告诉浏览器“这段内容和主文有关但可删”，真正在页面上看到侧边效果，全靠 CSS 控制。
aside 标签该放在哪？位置决定语义范围
它不是布局容器，而是语义锚点——放哪，就绑定到哪段主内容上。
- 嵌套在
article内部 → 只服务这篇文章，比如某篇教程旁的「兼容性说明」或「术语卡片」 - 与
main并列、同为body的直接子元素 → 全站级辅助内容，如右侧热门文章列表、分类导航 - 禁止塞进
header、footer、nav或main内部——HTML5 规范明确不支持 - 删掉整个
aside后，主内容仍需能独立表达完整意思，这是唯一判断标准
为什么写了 aside 内容还在正文下面？
因为 aside 默认是块级元素，行为和 p、div 完全一致：垂直流式排列、宽度 100%、无浮动、无定位。浏览器根本不认识“侧边栏”这个概念。
- 常见错误：只写
<aside><p>作者简介</p></aside>，没配任何 CSS，就指望它自动右对齐 - 更隐蔽的问题：父容器没设
display: flex或display: grid，却在aside上硬加float: right，结果父容器塌陷、文字绕进侧栏 - 响应式遗漏：小屏下没用
@media (max-width: 768px)把aside改成display: block，导致横向溢出
怎么让 aside 真正“靠边”？只靠 CSS，别信标签位置
现代项目中，优先用 flex 或 grid，避免 float 和 position: absolute ——前者易塌陷，后者会让 aside 脱离语义流，读屏器可能跳过。
- Flex 布局示例：
article { display: flex; gap: 1.5rem; }，aside { flex: 0 0 280px; }，主内容区域设flex: 1 - Grid 布局示例：
article { display: grid; grid-template-columns: 1fr 280px; gap: 1.5rem; }，再用aside { grid-column: 2; } - 必须显式设宽度（
flex-basis或width），否则窄屏下可能撑破容器 - 如果
aside在 HTML 中写在main前面但视觉要靠右，用order: 1控制顺序，而不是靠 DOM 位置“骗”样式
隐藏小屏下的 aside 时，别真删掉它
设 display: none 是最危险的快捷方式——等于告诉辅助技术和搜索引擎：“这内容不存在”。尤其当里面是法律声明、版权归属或关键提示时，隐藏 = 删除。
- 正确做法：用
@media (max-width: 768px) { aside { display: block; margin-top: 1.5rem; } }，让它自然流到主内容下方 - 旧版 IE（≤11）不支持
grid，若需兼容，得提供float + calc()回退，或用display: -ms-grid - 如果
aside里有搜索框、筛选按钮等可操作元素，确保键盘 Tab 流顺序不被z-index或position打乱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
