1. 使用透明度
语法:opacity:0 注意:元素消失,但是还会占据空间
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
opacity: 0;
}
</style>
<div class="box"></div>
2.使用display
语法:display:none 注意:元素消失,不会占据空间
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
display:none;
}
</style>
<div class="box"></div>
3.使用 scale 缩放
语法:transform:scale(0) 注意:元素消失,但是还会占据空间
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
transform:scale(0)
}
</style>
<div class="box"></div>
4.使用visibility
语法:visibility:hidden 隐藏 / visible显示 注意: 元素消失,但是还会占据空间
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
visibility:hidden;
}
</style>
<div class="box"></div>
5.使用宽高和overflow
语法:width:0;overflow:hidden; 注意: 元素消失,但是还会占据空间
<style>
.box{
width: 0px;
height: 0px;
background-color: aquamarine;
overflow:hidden;
visibility:hidden;
}
</style>
<div class="box"></div>
6.使用position定位
语法:position:absolute; top:-当前元素的高度;left:-当前元素的高度 注意: 元素消失,不会占据空间
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
position:absolute;
top:-100px;
left:-100px;
}
</style>
<div class="box"></div>