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、对比语音播报结果:前者无输出,后者仍播报原文本内容。










