display:none和visible:hidden兩者的作用都是把網(wǎng)頁上某個元素隱藏起來硝枉。
看不見摸不著（消失）
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>
已隱藏效果圖：
隱藏效果圖
