您的位置：首页 > Web前端 > CSS

CSS display:none和visibility:hidden的区别

2017-07-05 19:46 555 查看

CSS display:none：

使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;

visibility:hidden：

使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

这是网上的两句话，做了个简单的例子，加深理解。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div{background-color:yellow;margin-bottom:15px;margin-left:0px;height:50Px;}
</style>
<title></title>
</head>
<body>
<div>Div默认为 block1</div>
<div>Div默认为 block2</div>
<div>Div默认为 block3</div>
<hr/>
<div>Div默认为 block1</div>
<div style="display:none;">Div设置为display:none</div>
<div>Div默认为 block3</div>
<hr/>
<div>Div默认为 block1</div>
<div style="visibility:hidden;">Div设置为visibility:hidden</div>
<div>Div默认为 block3</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航