HTML中visibility:hidden 和 display:none 的區別及實例？
visibility:hidden 和 display:none 的區別
都是隱藏
但是visibility：hidden隱藏以后還會繼續保留位置
display：none 隱藏以后就不會占位置
關於display：none 隱藏如下實例的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
border: 1px solid #f00;
display: inline-block;
}
.div01{
/*visibility: hidden;*/
display: none;
}
</style>
</head>
<body>
<div>1</div>
<div class="div01">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>
結果如圖
關於visibility：hidden隱藏如下實例的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
border: 1px solid #f00;
display: inline-block;
}
.div01{
visibility: hidden;
/*display: none;*/
}
</style>
</head>
<body>
<div>1</div>
<div class="div01">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>
結果如圖
以上兩個實例可以看到visibility:hidden 和 display:none 的明顯區別