隐藏元素的6种方式

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>