小屏下aside应优先用hidden属性而非display: none：hidden语义正确、支持ssr一致性、js操作安全，且避免读屏器不可见和seo降权；display: none则彻底移除元素，导致无障碍和搜索引擎问题。
aside在小屏下该用display: none还是hidden属性？
直接写display: none是多数人第一反应，但会切断辅助技术访问、影响SEO、导致JS动态显示时焦点丢失。它等于从DOM渲染流中彻底抹除元素，读屏器读不到，搜索引擎不索引，表单控件也不提交。
hidden属性才是语义正确的隐藏方式：它等价于display: none的视觉效果，但由HTML层控制，支持服务端渲染一致性，JS操作更安全（element.hidden = true），且天然兼容无障碍。
- 桌面端需要显示 → 媒体查询里取消
hidden：@media (min-width: 768px) { aside[hidden] { display: block; } } - 移动端默认就带
hidden属性，避免FOUC（内容闪现） - 别用
visibility: hidden——元素还占位、能聚焦、会参与表单提交，侧边栏里有<input>时极易出错 - 禁用
aria-hidden="true"单独控制——它只骗读屏器，视觉上内容还在，用户看到的是“半隐藏”状态
移动端收起aside后，为什么内容会“闪一下”？
常见于服务端渲染（SSR）场景：HTML初始未加hidden，客户端JS加载前，aside短暂可见，等CSS和JS就位才消失——这就是FOUC。
真正可靠的解法是：初始HTML就带hidden，再用媒体查询在桌面端主动解除。这样无论JS是否加载、CSS是否就绪，视觉始终一致。
- 初始HTML写法：
<aside hidden>...</aside> - 桌面端恢复显示：
@media (min-width: 768px) { aside[hidden] { display: block; } } - 如果要加滑入动画，别只靠
display切换：先设opacity: 0; transform: translateX(-100%);，再用transition配合display或hidden，否则动画会跳帧 - 动态加载内容进aside后，记得同步更新
aria-live="polite"区域，否则读屏器不会播报新内容
aside在Flex/Grid布局中被隐藏后，焦点卡死怎么办？
这是最常被忽略的可访问性问题：当用户用Tab键导航到已隐藏的aside内部元素（比如一个<button></button>），焦点会丢失或卡在空白处，键盘用户无法继续操作。
关键不是“怎么隐藏”，而是“隐藏时是否清空焦点”。浏览器不会自动把焦点移出已hidden的元素树，必须手动干预。
- 隐藏前检查当前焦点是否在aside内：
if (aside.contains(document.activeElement)) { document.body.focus(); } - 或者更稳妥地，在
hidden生效前，将焦点移到逻辑下一个可聚焦元素（如main开头的<h1></h1>） - 不要依赖
tabindex="-1"临时移除焦点——它不解决根本问题，且可能破坏原有tab顺序 - 如果aside里有表单控件，隐藏时还需暂停其验证逻辑，避免提交时突然报错
为什么写了aside但内容还在正文下面？
因为aside只是语义标签，不是布局指令。它默认就是块级元素，行为和div完全一样：垂直堆叠、宽度100%、无浮动、无定位。浏览器根本不认识“侧边栏”这个词。
真正让它靠边的，永远是CSS。但错误的CSS写法会让它更难控制，尤其在响应式切换时。
- 别对
aside单独用float: right——父容器没触发BFC就会塌陷，main内容还得手动clear或加margin避让 - Flex布局推荐：
main { flex: 1; }+aside { width: 280px; flex-shrink: 0; }，父容器设display: flex - Grid布局推荐：
body { display: grid; grid-template-columns: 1fr 280px; }+aside { grid-column: 2; } - 小屏断点必须重置：
@media (max-width: 768px) { aside { display: block; margin-top: 1.5rem; } }，让它自然流到主内容下方，而不是留着float或grid导致横向溢出
aside的响应式处理难点不在“怎么让它消失”，而在“消失时是否仍保持语义完整、可访问、无副作用”。很多项目调通了显示逻辑，却在隐藏路径上埋下可访问性雷——焦点丢失、读屏器静默、SEO降权，都是事后才发现的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
