visibility: hidden和display: none 有什么不同

最新推荐文章于 2025-04-25 08:00:00 发布

转载最新推荐文章于 2025-04-25 08:00:00 发布 · 760 阅读

文章标签：

#CSS

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文详细解释了CSS中visibility:hidden与display:none的区别。visibility:hidden使元素不可见但保留其空间；display:none则完全移除元素，不占用任何空间。通过具体示例展示了这两种属性在布局中的实际应用。

visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。
display: none----将元素的显示设为无，即在网页中不占任何的位置。
例如有三个table，将中间的一个table hidden掉，你会发现在那个被hidden的table看不见了，但是，中间会留有很大的一空白，而这个空白就是这个table没有被隐藏时所占的位置 
而none的作用更像是把元素从网页中“去除”（当然不是真的去除，只是效果是如此）
例如有三个table，将中间的一个table none掉，你会发现在剩下的两个table中间不会有任何的空白。就好像中间的那个table从来不存在过一样