面试题：隐藏元素的七种方式

kyl789

于 2025-08-04 23:27:32 发布

阅读量448

点赞数 19

CC 4.0 BY-SA版权

文章标签： css css3 前端

本文链接：https://blog.csdn.net/kyl789/article/details/149899293

1.1 使用display

语法：display:none 注意：元素消失，不会占据空间不能使用过渡和动画

<style>
        *{
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 1s linear;

        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        button:hover+ .box{
        display: none;
        }
    </style>
<body>
    <button>按钮</button>
    <div class="box"></div>
    <div class="box1"></div>
</body>

1.2使用透明度

语法：opacity:0 注意：元素消失，但是还会占据空间能使用过渡和动画

 <style>
        *{
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 1s linear;

        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        button:hover+ .box{
        opacity: 0;
        }
    </style>

<body>
    <button>按钮</button>
    <div class="box"></div>
    <div class="box1"></div>
</body>

1.3 使用 scale 缩放

语法：transform:scale(0) 注意：元素消失，但是还会占据空间能使用过渡和动画

<style>
        *{
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 1s linear;

        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        button:hover+ .box{
        transform: scale(0);
        }
    </style>
<body>
    <button>按钮</button>
    <div class="box"></div>
    <div class="box1"></div>
</body>

1.4 使用visibility

语法：visibility:hidden 隐藏 / visible显示注意：元素消失，但是还会占据空间不能使用过渡和动画

 <style>
        *{
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 1s linear;
            
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        button:hover+ .box{
        visibility: hidden;
        }
    </style>

<body>
    <button>按钮</button>
    <div class="box"></div>
    <div class="box1"></div>
</body>

1.5 使用宽高和overflow

语法：width:0;overflow:hidden; 注意：元素消失，不会占据空间可以使用过渡和动画

<style>
        *{
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 1s linear;

        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        button:hover+ .box{
        height: 0;
        }
    </style>
<body>
    <button>按钮</button>
    <div class="box"></div>
    <div class="box1"></div>
</body>

1.6 使用position定位

语法：position:relative; top:-当前元素的高度；left：-当前元素的高度注意：元素消失，不会占据空间不能使用过渡和动画

<style> 
*{
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 1s linear;
            position: relative;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        button:hover+ .box{
        left: -200px;
        }
    </style>

<body>
    <button>按钮</button>
    <div class="box"></div>
    <div class="box1"></div>
</body>

1.7 使用3D效果给元素X轴或Y轴添加旋转旋转大于90度时要设置背面不可见

语法： transform: roteX,Y(90deg) transform: rotateX，Y(>90deg)backface-visibility: hidden;

注意：元素会消失但会占据空间可以使用过渡和动画

等于90度时

<style>
        *{
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 1s linear;
            position: relative;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        button:hover+ .box{
        transform: rotateY(90deg);
        }
    </style>

<body>
    <button>按钮</button>
    <div class="box"></div>
    <div class="box1"></div>
</body>

大于90度时

<style>
        *{
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 1s linear;
            position: relative;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        button:hover+ .box{
        transform: rotateY(100deg);
        backface-visibility: hidden;
        }
    </style>

<body>
    <button>按钮</button>
    <div class="box"></div>
    <div class="box1"></div>
</body>