前端隐藏元素的方法

1 opacity隐藏元素
2 display隐藏元素
3 scale隐藏元素
4 z-index隐藏元素
5 overflow:hidden;隐藏元素
    .one {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        opacity: 0;
    }

    .two {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: none;
    }

    .three {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        transform: scale(0);
    }

    .four {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid red;
        z-index: -999;
    }
    .four1 {
        position:absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 30px;
        background-color: blue;
    }
    .four2 {
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        background-color: red;
        z-index: -1;
    }

    .five {
        width: 0;
        height: 0;
        overflow: hidden;
    }
</style>

<!-- 第一个隐藏元素的方法,使用opacity隐藏 -->
<div class="one"></div>

<!-- 第二个隐藏元素的方法，使用display隐藏 -->
<div class="two"></div>

<!-- 第三个隐藏元素的方法，使用scale缩放0倍隐藏 -->
<div class="three"></div>

<!-- 第四个隐藏元素的方法，使用z-index隐藏定位的两个元素 -->
<div class="four">
    <div class="four1"></div>
    <div class="four2"></div>
</div>

<!-- 第五个隐藏元素的方法，使用 overflow: hidden;隐藏 -->
<div class="five"></div>