display:none 和 visible:hidden 的区
2019-02-19 本文已影响0人
一只水木子
display:none和visible:hidden两者的作用都是把网页上某个元素隐藏起来。
看不见摸不着（消失）
display:none 将元素隐藏并不显示，同时也不为其保留物理空间，也就是说，HTML元素(对象)的宽高等各种属性会“丢失”。
看不见摸得着（隐身）
visible:hidden 将元素隐藏，HTML元素（对象）仅在视觉上看不见，但它会保留宽高等属性，也就是说会保留原来的物理空间。
未隐藏：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>举例说明</title>
<style>
.box{
width: 50%;
border: 1px solid #6ac5ac;
float: left;
margin-bottom: 10px;
padding: 5px;
}
.hide, .show{
width: 20%;
background: #d64078;
border: 1px solid #000;
float: left;
}
/*
.dis{
display: none;
}
.vis{
visibility: hidden;
}
*/
code{
background-color: #f6f6f6;
color: #c7254e;
padding: 2px 4px;
}
</style>
</head>
<body>
<div class="box">
<h3><code>display:none</code></h3>
<div class="hide dis">隐藏块</div>
<div class="show">显示块</div>
</div>
<div class="box">
<h3><code>visibility:hidden</code></h3>
<div class="hide vis">隐藏块</div>
<div class="show">显示块</div>
</div>
</body>
</html>
未隐藏效果图：
未隐藏效果图
已隐藏：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>举例说明</title>
<style>
.box{
width: 50%;
border: 1px solid #6ac5ac;
float: left;
margin-bottom: 10px;
padding: 5px;
}
.hide, .show{
width: 20%;
background: #d64078;
border: 1px solid #000;
float: left;
}
.dis{
display: none;
}
.vis{
visibility: hidden;
}
code{
background-color: #f6f6f6;
color: #c7254e;
padding: 2px 4px;
}
</style>
</head>
<body>
<div class="box">
<h3><code>display:none</code></h3>
<div class="hide dis">隐藏块</div>
<div class="show">显示块(我在隐藏块的位置)</div>
</div>
<div class="box">
<h3><code>visibility:hidden</code></h3>
<div class="hide vis">隐藏块</div>
<div class="show">显示块（我没动过）</div>
</div>
</body>
</html>
已隐藏效果图：
隐藏效果图
