核心区别在于是否保留文档流位置：visibility: hidden 隐藏但占位，display: none 彻底移出渲染树、不占空间。

visibility: hidden 和 display: none 的核心区别在哪

关键看「是否保留文档流位置」：visibility: hidden 让元素不可见但占位，display: none 彻底移出渲染树，不占空间、不参与布局。

什么时候必须用 visibility: hidden 而不是 display: none

当需要保持布局稳定、避免重排（reflow），或元素仍需响应事件/被屏幕阅读器感知时，visibility 更合适：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• visibility: hidden 下的子元素可通过 visibility: visible 单独显示（级联特性）
• 元素仍占据盒模型空间，父容器高度、相邻元素位置都不变
• 部分辅助技术（如某些屏幕阅读器）仍可读取 visibility: hidden 元素的内容（取决于实现）
• 动画过渡支持更好：visibility 可配合 transition 实现淡入淡出（需搭配 opacity 或 transform）

display: none 的隐藏更“彻底”，但也更“危险”

display: none 不仅不可见，还会触发浏览器重排，影响性能和交互逻辑：

• 元素从渲染树中完全移除，其宽度、高度、margin 等全部失效
• 子元素一并消失，无法通过 CSS 单独恢复（除非改回父级 display）
• 绑定在该元素上的 JS 事件监听器依然存在，但元素不响应任何鼠标/焦点事件
• 如果用 JS 频繁切换 display: none ↔ display: block，可能引发连续重排，卡顿明显
• SEO 和无障碍支持更弱：搜索引擎和多数屏幕阅读器会忽略 display: none 内容

容易被忽略的兼容性与实操细节

看似简单，但几个边界情况常踩坑：

• visibility: collapse 在表格元素（<tr>, <code><td>）中表现特殊：等效于 <code>display: none；但在非表格元素上等同于 visibility: hidden
• visibility 不触发硬件加速，而 opacity: 0 或 transform: scale(0) 可能触发——若需高性能隐藏+动画，优先考虑后者组合
• IE8 及更早版本不支持 visibility: collapse，且对 visibility 的继承行为有偏差
• 用 JS 检测可见性时：getComputedStyle(el).visibility === 'hidden' 可靠；但 el.offsetParent === null 不能准确判断 display: none（因父级也可能为 display: none）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！