display:none和visibility:hidden区别是什么

发布网友发布时间：2022-04-06 11:24

共2个回答

懂视网时间：2022-04-06 15:45

在项目中有时需要隐藏一些元素，会用到display:none或者 visibility:hidden，两种方法都可以实现隐藏的效果，那他们有什么区别呢？这篇文章就和大家讲讲CSS中display:none和visibility:hidden的区别。有需要的朋友可以参考一下。

<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Index4</title>
</head>
<body>
 <div>
 <!--display:none是隐藏元素，隐藏后它并不会再占用之前所占的区域(也就是说，连它自己的位置都隐藏掉了)-->
 <div style="display:none; width:100px;height:100px">小苹果</div>
 
 <div style="width:100px;height:100px; background-color:yellow">A</div>
 
 <!--visibility:hidden是隐藏元素，隐藏后，它还会占用之前所占的区域（也就是说仅仅是隐藏它自己的外观，并不会隐藏自己的位置）-->
 <div style="visibility: hidden; width: 100px; height: 100px">圣女果</div>
 
 <div style="width:100px;height:100px; background-color:yellow">B</div>
 </div>
</body>
</html>

隐藏.png

另外：服务端控件有一个Visible属性：

表示控件是否可见，如果Visible=False那么在在渲染的时候就会忽略掉这个控件，也就是说这个控件不会生成HTML代码。也就表明根本不存在这个控件，既然控件都不存在，也就不会占用区域。

热心网友时间：2022-04-06 12:53

二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。 display:none; 使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”; visibility:hidden; 使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值