隐藏元素六种方式

一. 使用透明度

语法：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>