有人会将CSS中的属性display和visibility混淆，他们看似没什么不同，其实区别是很大的。
visibility属性控制定位的元素是否可见，取值包括：visible（可见）、hidden（隐藏）、inherit（继承），默认值是inherit。visibility属性与display属性的不同之处在于：当元素被隐藏时，visibility属性定义的元素任然为保留原有的显示空间。
例如以下代码：
<html>
<head>
<title>display和visibility</title>
<style type="text/css">
#dis{
boder:2px solid red;
width:100px;
margin:10px;
}
#vis{
border:2px solid red;
margin:10px;
width:100px;
}
</style>
</head>
<body>
<div id="dis">这是案例1</div>
<div id="vis">这是案例2</div>
</body>
</html>
如果我们要隐藏案例1，同时案例2冲上来占据案例1的位置，我们可以使用如下代码对案例1进行格式化：
#dis{
border:2px solid red;
width:100px;
margin:10px;
display:none;
}
如果要隐藏案例2，但保留其位置为空白，我们可以使用以下代码对案例1进行格式化：
#dis{
border:2px solid red;
width:100px;
margin:10px;
visibility:hidden;
}
个人笔记1：display与visibility用法,布布扣,bubuko.com
时间： 2024-08-24 15:45:22