display: none 彻底移除元素，不占空间、不响应事件、不被屏幕阅读器感知；visibility: hidden 仅隐藏视觉，仍占布局空间、可获取尺寸、子元素无法通过 visible 覆盖父级 hidden。

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

二者都能让元素“看不见”，但浏览器对待它们的方式完全不同：display: none 是彻底移除渲染流中的该元素，不占空间、不响应事件、不被屏幕阅读器感知；visibility: hidden 仅隐藏视觉呈现，元素仍占据布局空间、仍可被 getBoundingClientRect() 获取尺寸、父元素设为 hidden 时子元素设 visible 仍可显示（层叠上下文相关）。

什么时候该用 display: none

适用于需要完全排除元素参与布局和交互的场景，比如条件性展示模块、表单步骤切换、响应式断点隐藏组件。

• 页面加载后动态移除某区域（如广告位未加载完成前占位符）
• 使用 JavaScript 控制显隐时，后续需频繁读取该元素尺寸或位置 —— 切记：一旦设为 display: none，offsetTop、clientWidth 等会返回 0 或 NaN
• SEO 敏感内容（如辅助说明文字）需确保不被索引时，配合服务端逻辑更稳妥，纯前端 display: none 不保证搜索引擎忽略

visibility: hidden 的典型用途与陷阱

它更适合“临时遮罩”或“保留占位”的需求，比如 hover 动画过渡、焦点管理、无障碍隐藏（需搭配 aria-hidden="true"）。

• 做淡入动画时，先设 visibility: hidden; opacity: 0，再用 CSS transition 改 opacity 和 visibility —— 单独靠 opacity 无法触发重排，但 visibility 变化会
• 父元素设 visibility: hidden，其子元素即使设 visibility: visible 也**不会显示**（这是继承行为，不是层叠），这点和 display 完全不同
• 元素设 visibility: hidden 后仍能接收 focus()、响应 keydown（如果 tabIndex >= 0），容易造成键盘导航逻辑混乱

实操对比示例

以下代码可直接保存为 test.html 在浏览器中打开观察差异：

  


  A
  B (display: none)
  C (visibility: hidden)
  D

注意看 B 和 C 周围的间距：B 消失后 A 与 D 紧邻，C 消失后 A 与 D 之间仍保留 C 的空白间隙。这就是布局是否参与的关键证据。

复杂点在于混合使用：比如在动画中同时控制 display 和 visibility，必须严格按顺序 —— 先设 visibility: hidden，再设 display: none（否则后者会让前者失效）；反向恢复时则相反。稍有错序就会出现闪现或卡顿。

# css  # javascript  # java  # html  # 前端  # html5  # seo  # 浏览器  # 搜索引擎  # 区别 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何实现javascript表单验证_正则表达式有哪些实用技巧  Laravel怎么进行浏览器测试_Laravel Dusk自动化浏览器测试入门  js实现点击每个li节点，都弹出其文本值及修改  JavaScript如何实现继承_有哪些常用方法  网站制作大概多少钱一个,做一个平台网站大概多少钱？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  Laravel如何为API编写文档_Laravel API文档生成与维护方法  高防服务器租用首荐平台，企业级优惠套餐快速部署  如何在云主机上快速搭建多站点网站？  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  如何基于云服务器快速搭建网站及云盘系统？  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  微信小程序 scroll-view组件实现列表页实例代码  Laravel如何记录日志_Laravel Logging系统配置与自定义日志通道  Android中AutoCompleteTextView自动提示  如何在Tomcat中配置并部署网站项目？  php 三元运算符实例详细介绍  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  JavaScript常见的五种数组去重的方式  专业商城网站制作公司有哪些,pi商城官网是哪个？  JavaScript模板引擎Template.js使用详解  使用C语言编写圣诞表白程序  Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程  如何在建站之星网店版论坛获取技术支持？  javascript读取文本节点方法小结  如何在服务器上三步完成建站并提升流量？  如何在IIS7上新建站点并设置安全权限？  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  如何在建站宝盒中设置产品搜索功能？  如何在IIS中配置站点IP、端口及主机头？  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  浅谈javascript alert和confirm的美化  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  详解vue.js组件化开发实践  Laravel如何实现多语言支持_Laravel本地化与国际化(i18n)配置教程  C++用Dijkstra(迪杰斯特拉)算法求最短路径  如何用腾讯建站主机快速创建免费网站？  Laravel怎么调用外部API_Laravel Http Client客户端使用  iOS验证手机号的正则表达式  Laravel怎么写单元测试_PHPUnit在Laravel项目中的基础测试入门  如何在云主机上快速搭建网站？  如何自定义建站之星网站的导航菜单样式？  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  如何快速上传自定义模板至建站之星？  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践