17370845950

display: none 彻底移除元素，不占空间、触发重排、无障碍友好；visibility: hidden 保留占位、仅重绘、子元素可单独显示；二者均不响应鼠标事件，但 pointer-events 设置才决定事件穿透。

display: none 会让元素彻底退出文档流

设置 display: none 后，元素不仅不可见，而且不占任何空间，其后续兄弟元素会立即上移填补空位。浏览器渲染时完全跳过该元素的布局计算。

• 适用于需要「永久隐藏」或「条件性移除」的场景，比如切换菜单、表单步骤控制
• JavaScript 中读取 offsetHeight 或 getBoundingClientRect() 会返回 0
• 屏幕阅读器默认忽略 display: none 元素，无障碍支持较好
• 触发重排（reflow）——因为布局结构实际发生了变化

visibility: hidden 保留占位但隐藏内容

visibility: hidden 只让元素变透明不可见，它在文档流中的位置、尺寸、边距都照常保留，周围元素不会移动。

• 适合做「临时遮罩」或「悬停过渡」，比如 tooltip 出现前先预占位
• 子元素可通过设置 visibility: visible 单独显示（这是和 opacity: 0 的关键区别）
• 仍可被 JavaScript 获取尺寸，offsetHeight 返回真实值
• 只触发重绘（repaint），不触发重排，性能略优

它们都不影响事件捕获和冒泡行为

两者都会让元素无法响应鼠标事件（如 click、hover），但事件仍可能穿透到下层元素——这取决于 pointer-events 设置，而非 visibility 或 display 本身。

• display: none 元素完全从事件系统中移除，其上的事件监听器不会触发
• visibility: hidden 元素虽不可见，但若设 pointer-events: auto（默认），鼠标事件仍会被捕获（不过用户看不到反馈）
• 更安全的做法是：隐藏同时加 pointer-events: none，避免意外触发

别用 opacity: 0 替代它们来“隐藏”

opacity: 0 是视觉透明，元素依然参与布局、响应事件、影响 z-index 层叠，和前两者有本质区别。

button {
  opacity: 0; /* 看不见，但能点中，占据空间，会挡住后面元素 */
  /* 如果真想隐藏又保留结构，用 visibility: hidden 更准确 */
}

真正需要「渐隐动画」时才用 opacity；纯隐藏逻辑，请优先选 display 或 visibility，并明确你是否要保留占位。

最易被忽略的一点：display 切换可能引发 layout thrashing，尤其在循环中反复读写 offsetHeight 再设 display；visibility 则相对温和——但如果你忘了子元素的 visibility 继承行为，反而会暴露本该隐藏的内容。