display: none 最彻底隐藏，元素从渲染树移除、不占空间、不响应事件；visibility: hidden 保留占位且可聚焦；opacity: 0 仅透明但默认仍响应事件。
直接说结论：用 display: none 是最彻底的隐藏，而 visibility: hidden 和 opacity: 0 都会保留元素占位，且仍可响应事件——这点常被忽略。
display: none 是真“消失”，但会触发重排
元素从渲染树中完全移除，不占空间、不响应点击、不影响布局流。适合需要彻底隐藏并可能后续移除或条件渲染的场景。
- JavaScript 中通过
element.style.display = 'none'切换后，该元素的offsetHeight和offsetWidth立即变为0 - 注意：频繁切换
display会引发浏览器重排（reflow），性能敏感区域（如动画中）应避免 - 它不会影响 CSS 过渡（
transition），因为属性本身不支持过渡动画
visibility: hidden 保留位置但不可见，仍可被 focus
元素视觉隐藏，但仍在文档流中占据原有空间，且大多数情况下仍能接收焦点（tabindex 有效）、响应 pointer-events（除非显式禁用）。
- 适合做“临时遮罩”或“占位预加载”，比如下拉菜单展开前先设为
visibility: hidden，再用opacity做淡入 -
visibility支持transition，但只对visibility: visible → hidden的切换有延迟生效效果（反向不触发过渡） - 子元素可通过设置
visibility: visible强制显示，这是它和display的关键区别
opacity: 0 看不见但“摸得着”，默认仍响应鼠标事件
只是把透明度调到 0，元素几何信息、事件绑定、焦点能力全部保留。常被误认为是“隐藏”，实则是“隐形但活跃”。
- 必须配合
pointer-events: none才能真正禁用交互，否则点击会穿透失败或意外触发 - 支持完整的 CSS 过渡和动画，适合做渐隐/渐显效果
- 对屏幕阅读器（a11y）仍可能暴露内容，如需无障碍隐藏，需额外加
aria-hidden="true"或clip-path: inset(50%)
真正要“隐藏并隔离”的时候，别只写 opacity: 0 就完事；而想“保留 DOM 结构但暂停视觉呈现”，visibility: hidden 比 display: none 更轻量——但得记得它子元素还能钻出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
