display:none; 和 visibility:hidden 的区别

最新推荐文章于 2025-07-30 23:58:34 发布

Miss_Liang

最新推荐文章于 2025-07-30 23:58:34 发布

阅读量293

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/Miss_Liang/article/details/93979874

3 篇文章

订阅专栏

本文深入解析了CSS中display:none与visibility:hidden的区别，从占位、过渡效果、计数器影响及资源加载等方面，全面阐述了这两种隐藏方式的特点及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看了张鑫旭老师的《CSS世界》一书，对 display:none 和 visibility:hidden 的区别整理如下：

隐藏 display: none 是真正意义上的隐藏，当一个元素设置了此属性，则其后代子元素都隐藏
占位 display: none 设置的元素是不占位的
transition 过渡的影响 display:none 不会对 animation 动画造成影响，但是会影响 transition 的过渡效果
对计数器的影响 列表中如果某个元素设置了 display:none 则该元素不加入计数队列
资源的加载 在 FF 浏览器下，display:none 的元素的 background-image 图片资源是不加载的，包括父元素 display:none 也是如此；chrome 和 safari 浏览器，则要分情况，若父元素 display: none，图片不加载，若本身背景图所在元素 display:none 则图片依旧会去加载；IE 浏览器，无论怎样都会请求图片资源

隐藏 visibility: hidden 的隐藏是因为继承隐藏的，当一个元素设置了此属性，其后代子元素是因为继承了该属性才会隐藏的，当后代子元素设置了 visibility: visible ，后代子元素会显示
占位 visibility:hidden 设置的元素是占位的
transition 过渡的影响 visibility:hidden 不会影响 transition 的过渡效果
对计数器的影响 列表中如果某个元素设置了 visibility:hidden 则该元素依然加入计数队列，visibility:hidden 不会影响计数器的计数