标准答案
- display: none 会把元素从布局树中移除，不占空间，也不渲染，通常屏幕阅读器也读不到。
- visibility: hidden 会让元素不可见，但仍占原来的布局空间，也不会响应鼠标事件。
- opacity: 0 只是把元素画成透明，元素仍占空间，也可能响应点击、键盘焦点和辅助技术读取。
- 如果只是做淡入淡出动画，可以用 opacity；如果要彻底隐藏并移出布局，用 display: none。
- 用 opacity 隐藏可交互元素时，要配合 pointer-events、tabindex、aria-hidden 或真正的隐藏逻辑，避免用户看不见却还能点到。
题目解析
回答时可以按四个维度比较：是否占位、是否渲染、是否能交互、是否影响可访问性。
如果目的是给屏幕阅读器保留内容，不应该用 display: none 或 visibility: hidden，而应该使用专门的 visually-hidden 样式。
代码示例
透明元素如果还在页面上，最好明确处理事件命中。
CSS
.hidden-from-layout {
display: none;
}
.hidden-but-space {
visibility: hidden;
}
.fade-out {
opacity: 0;
pointer-events: none;
}常见误区
- 认为 opacity: 0 的元素不能点击。它仍可能接收事件。
- 用 display: none 隐藏给屏幕阅读器的提示文本，导致辅助技术也读不到。
- 只比较是否可见，不比较布局和交互影响。