display: none 最彻底隐藏元素，不占空间、不可交互、不被屏幕阅读器读取；hidden 属性语义化等效但免样式冲突；aria-hidden 仅屏蔽读屏软件，不影响视觉与交互。
用 display: none 隐藏元素最彻底
这是隐藏 HTML 元素最常用也最干净的方式：元素不占布局空间、不可交互、不被屏幕阅读器读取（默认行为）。适合“真隐藏”，比如条件未满足时完全不想让用户感知到该区域存在。
常见错误是误用 visibility: hidden 替代它——后者仍占位、仍可被焦点捕获，容易导致 tab 键导航跳空或布局错位。
-
display: none会触发浏览器重排（reflow），频繁切换可能影响性能，动画中慎用 - Vue/React 中绑定
v-if或{condition && <component></component>}，底层就是控制display: none或直接不渲染 - 如果想保留数据绑定但隐藏，别用
ng-show（AngularJS）这种仅切display的指令，优先考虑ng-if
hidden 属性比 CSS 更语义化且免样式冲突
HTML5 原生的 hidden 布尔属性，等价于 display: none，但无需写 CSS，也不依赖类名。浏览器原生支持，连内联样式冲突都绕开了。
注意它不是“仅视觉隐藏”——和 display: none 一样，元素不可聚焦、不参与可访问性树（除非显式加 aria-hidden="false"）。
- 写法：
<div hidden>临时下线内容</div>，或 JS 动态操作el.hidden = true - 它会被 CSS 覆盖：如果写了
[hidden] { display: block; }，那就失效了——这点反而要小心 - 不支持 IE9 及更早版本，但现代项目基本不用考虑
用 aria-hidden="true" 只隐藏给屏幕阅读器的内容
这是唯一专为“视觉可见但辅助技术不可见”设计的方案。比如图标按钮里的纯装饰性图标、重复的文本标签、加载中的动画文字。
关键点：它不改变布局、不阻止交互、不隐藏视觉——只告诉读屏软件“忽略这个”。别指望它让 div 消失。
- 必须配合真实功能使用，例如：
<span aria-hidden="true">→</span><span class="sr-only">进入详情页</span> - 不能单独用于隐藏敏感内容——视力正常的用户照样看得见
- 若父元素设了
aria-hidden="true"，子元素默认继承，除非显式设aria-hidden="false"
opacity: 0 和 visibility: hidden 看似隐藏实则留坑
这两个常被当成“隐藏方案”，但本质是“假装看不见”，实际隐患不少：
-
opacity: 0：元素仍在文档流、仍可响应点击/悬停/焦点，z-index 也照常生效——容易造成点击穿透或键盘迷路 -
visibility: hidden：父元素隐藏后，子元素即使设visibility: visible也无效；且仍占位，可能导致容器高度异常 - 两者都不影响可访问性：屏幕阅读器照读，搜索引擎照索引
- 真正需要淡入淡出动画？先用
opacity: 0; pointer-events: none;禁交互，再过渡，别只靠 opacity
最易被忽略的是可访问性与交互性的耦合：一个元素是否该被键盘 tab 到、是否该被读屏软件宣布、是否该响应鼠标事件——这些从来不是单靠“看不见”就能统一解决的。得根据场景拆开判断，而不是找一个“万能隐藏”方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
