display: none彻底移除元素并触发重排，visibility: hidden仅隐藏但保留占位、仅重绘；前者子元素不可见且不响应事件，后者子元素可显、可交互；前者屏幕阅读器忽略，后者默认仍读取。
如果您在编写 CSS 时需要隐藏页面元素，但不确定该选用 display: none 还是 visibility: hidden，则需明确二者在渲染行为、空间占用与交互响应上的根本差异。以下是具体区分方式：
一、是否占据文档流空间
该区别直接影响页面布局的连续性：使用 display: none 会彻底移除元素在文档流中的位置，后续元素将立即填补空缺；而 visibility: hidden 仅隐藏视觉内容，元素仍保留在原始位置并维持原有尺寸占位。
2、在 Styles 面板中分别尝试添加 display: none 和 visibility: hidden。
3、观察页面其他元素是否发生位置偏移或重排。
二、是否触发浏览器重排（reflow）
重排涉及整个布局树的重新计算，开销远高于仅刷新像素绘制的重绘（repaint）。display: none 的切换必然引发重排，而 visibility: hidden 仅触发重绘，性能更轻量。
1、在 Chrome DevTools 中打开 Rendering 面板，勾选 “Paint flashing” 和 “Layout Shift Regions”。
2、对同一元素反复切换 display: none ↔ display: block，观察大面积黄色闪烁（表示重排）。
3、再切换 visibility: hidden ↔ visibility: visible，仅出现局部红色闪烁（表示重绘）。
三、子元素是否可被单独显示
display: none 具有“断连性”——父元素隐藏后，子元素无论设置何种 display 值均无法呈现；而 visibility: hidden 是继承属性，子元素可通过显式声明 visibility: visible 恢复可见。
1、为父容器设置 visibility: hidden。
2、在其内部任一子元素上添加 visibility: visible 样式。
3、确认该子元素是否实际显示，且周围空白区域仍保留父容器原始尺寸。
四、是否响应用户交互事件
被 display: none 隐藏的元素完全脱离渲染树，无法接收任何鼠标、键盘或焦点事件；而 visibility: hidden 元素虽不可见，仍保留在渲染树中，可被 JavaScript 访问并响应事件（如 click、focus、getBoundingClientRect()）。
1、为一个按钮同时添加 visibility: hidden 和 onclick="alert('fired')"。
2、使用键盘 Tab 键导航至该按钮位置。
3、按 Enter 键，验证弹窗是否触发。
五、对辅助技术的影响
屏幕阅读器通常忽略 display: none 元素，视其为不存在；而 visibility: hidden 元素默认仍会被读取内容，除非额外配合 aria-hidden="true" 或 clip-path 等屏蔽手段。
1、启用 NVDA 或 VoiceOver 屏幕阅读器。
2、将焦点移至分别应用 display: none 和 visibility: hidden 的文本段落。
3、对比语音播报结果：前者无输出，后者仍播报原文本内容。
