隐藏元素六种方式

使用透明度

语法：opacity:0 |1

0:透明

1：不透明

注意：元素消失，占据空间，不会让出原来的位置

           可以使用过渡效果

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    opacity: 0;
  }
</style>
<div class="box"></div>

使用display

语法：display:none

display:black

注意：元素消失，不会占据空间

            不能使用过渡效果

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    display:none;
  }
</style>
<div class="box"></div>

使用 scale 缩放

语法：transform:scale(0) |（1）

0：是消失

1：是正常

 注意：元素消失，不占据空间

            可以使用过渡效果

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    transform:scale(0)
  }
</style>
<div class="box"></div>

使用visibility

语法：visibility:hidden 隐藏 / visible显示

注意： 元素消失，但是还会占据空间

           不可以使用过渡效果

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    visibility:hidden;
  }
</style>
<div class="box"></div>

使用宽高和overflow

宽度或高度为0  配合overflow：hidden

 宽：  语法：width:0;overflow:hidden; 注意： 元素消失，但是还会占据空间

高：注意： 元素消失，不占据空间，让出原来的位置，可以使用过渡效果

<style>
  .box{
    width: 0px;
    height: 0px;
    background-color: aquamarine;
    overflow:hidden;
    visibility:hidden;
  }
</style>
<div class="box"></div>

使用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>