Rumah >hujung hadapan web >tutorial css >深入理解CSS中display:none和visibility:hidden的区别
深入理解CSS中display:none和visibility:hidden的区别
- yuliaasal
- 2018-09-26 14:37:282650semak imbas
在项目中有时需要隐藏一些元素，会用到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>
另外：服务端控件有一个Visible属性：
表示控件是否可见，如果Visible=False那么在在渲染的时候就会忽略掉这个控件，也就是说这个控件不会生成HTML代码。也就表明根本不存在这个控件，既然控件都不存在，也就不会占用区域。
Atas ialah kandungan terperinci 深入理解CSS中display:none和visibility:hidden的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：分享CSS中设置文字颜色的五种方法Artikel seterusnya：怎么用CSS设置动态超链接（附代码）