display: none 彻底移除元素布局空间，不占文档流、不触发重排、无障碍支持弱；visibility: hidden 保留布局占位但不可见，支持transition但无渐变效果；opacity: 0 实现平滑淡入淡出，仍响应交互且需配合pointer-events: none和焦点管理。
display: none 会彻底移除元素的布局空间
元素设为 display: none 后，浏览器渲染时完全跳过它：不占文档流、不触发重排（reflow）、父容器和兄弟元素会像它不存在一样重新布局。适合需要“永久隐藏”或切换状态时彻底移除 DOM 占位的场景。
常见错误是误用它做渐变动画——display 是离散属性，无法过渡（transition 对它无效）；强行加 transition 会导致动画直接跳变。
- 不能与
transition配合实现淡入淡出 - JavaScript 查询
offsetHeight或getBoundingClientRect()会返回0 - 屏幕阅读器默认忽略该元素，无障碍支持较弱（需配合
aria-hidden="true"显式声明）
visibility: hidden 保留布局但不可见
visibility: hidden 让元素“隐形”，但仍在文档流中占位：父容器高度、兄弟元素位置都不变。它支持 transition（仅限 visibility 自身，不带动画效果），常用于需要维持布局稳定的临时隐藏，比如下拉菜单收起前的过渡占位。
注意：子元素若设 visibility: visible，会强制显示（继承可被覆盖），这点和 display 不同。
立即学习“前端免费学习笔记（深入）”；
- 支持
transition: visibility 0.3s，但不会产生渐变，只是延迟显隐切换时机 - 仍响应鼠标事件（如
click），需额外加pointer-events: none禁用 - 对性能影响小，适合高频切换但不希望重排的场景
opacity: 0 是视觉透明，仍参与交互与布局
opacity: 0 只改变元素的透明度，不影响文档流、不阻止事件冒泡、不干扰布局计算。它是唯一能和 transition 配合做出平滑淡入淡出效果的属性。
但这也带来隐患：元素虽然看不见，却依然能被点击、聚焦、被键盘导航访问，容易造成可访问性问题或误操作。
- 必须搭配
pointer-events: none才能禁用鼠标交互 - 需手动处理键盘焦点（如
tabindex="-1"+focus()控制） - 动画性能较好（GPU 加速友好），但 opacity z-index 行为
三者叠加使用时的关键顺序
当需要兼顾动画、可访问性和布局稳定性时，常组合使用。例如实现一个“先淡出再隐藏”的关闭动效：
button.close {
opacity: 1;
visibility: visible;
transition: opacity 0.2s ease-out;
}
button.close.hidden {
opacity: 0;
pointer-events: none;
}
button.close.hidden::after {
/* 利用伪元素延后 display 移除 */
content: "";
animation: hideAfterOpacity 0.2s forwards;
}
@keyframes hideAfterOpacity {
to { display: none; }
}更稳妥的做法是用 JavaScript 在 transitionend 事件后设置 display: none ——因为 display 本身无法过渡，必须靠 JS 衔接时机。
最容易被忽略的是可访问性：仅靠 opacity: 0 或 visibility: hidden 并不等价于语义上的“隐藏”，需同步设置 aria-hidden="true" 和管理焦点流。
