visibility:hidden 隐藏元素本身,并且在网页中 占位置
display:none 隐藏元素本身,并且在网页中 不占位置 (常用)
overflow:hidden 隐藏超出盒子的内容部分(超出的内容隐藏但不占位)
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>隐藏元素</title>
<style>
* {
/* 去除页面默认的边距 */
padding: 0;
margin: 0;
}
.box1 {
width: 200px;
height: 200px;
float: left;
background-color: orange;
margin: 50px 50px;
/* 默认显示,不隐藏 */
display: block;
}
/* 鼠标悬停在box1隐藏box1 */
.box1:hover {
display: none;
}
.box2 {
float: left;
width: 200px;
height: 200px;
background-color: skyblue;
margin: 50px 50px;
/* visibility: hidden; */
}
.box3 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
margin: 50px 50px;
/* overflow: hidden; */
}
.box4 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
margin: 50px 50px;
}
</style>
</head>
<body>
<div class="box1">
<p>box1</p>
<p>display: none;</p>
</div>
<div class="box2">
<p>box2</p>
<p>
visibility: hidden; <br />
box1隐藏了我就去它的位置!
</p>
</div>
<div class="box3">
<p>box3</p>
<p>
overflow: hidden;<br />
box2隐藏了我不去它的位置!
</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
</div>
<div class="box4">普通</div>
</body>
</html>
都不隐藏的效果
将box的隐藏代码解除掉注释,增加隐藏效果(.box1没有隐藏是因为添加了hover属性,只有鼠标悬停在.box1才会隐藏).box3的超出的内容被隐藏了
鼠标悬停在.box1的效果