display:none和visibility:hidden

最新推荐文章于 2025-07-16 21:01:28 发布

YOLO大师

最新推荐文章于 2025-07-16 21:01:28 发布

阅读量6.5k

点赞数 12

CC 4.0 BY-SA版权

原创文章，禁止任何形式转载！

本文链接：https://blog.youkuaiyun.com/shangyanaf/article/details/94863415

学透CSS，掌握真正的代码艺术专栏收录该内容

61 篇文章 ¥9.90 ¥99.00

订阅专栏

本文详细探讨了CSS中`display:none`和`visibility:hidden`的区别。`display:none`将元素从布局中完全移除，而`visibility:hidden`使元素不可见但保留其占据的空间。此外，还提到了其他隐藏元素的方法，如使用`opacity:0`、`filter: opacity(0)`、`transform: scale(0)`和调整尺寸等。

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

原文

作用

用来隐藏页面的元素。

区别

display:none

被隐藏的元素彻底消失，不占物理位置。使用display:block让其重新显示。

visibility:hidden

仅看不见，仍占据物理空间，但是不能被浏览器发现，不能触发事件。

例：
隐藏元素均未隐藏

<span style=" background-color:yellow"> display:none  </span>
<span style=" background-color:green">我前面是display</span>

<br />

<span style=" background-color:yellow">visibility:hidden;</span>
<span style="background-color:green">我前面是visibility</span&g

了解本专栏