首页 > 代码库 > 个人笔记1：display与visibility用法
个人笔记1：display与visibility用法
有人会将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;
}
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。