前端面试题2 -CSS隐藏元素常用的三种方法_前端如果要做过渡使用哪种隐藏方式最好-CSDN博客

本文链接：https://blog.csdn.net/lancelote_pc/article/details/105299544

CSS隐藏页面元素的方法

前几天面试被问到了这个问题，只记得前三种，第三种只记得叫透明度，单词死活是想不起来，回来总结一下

1.第一种 display:none

真正的隐藏元素，压根就没有给这个元素保留位置，连盒模型也没生成，被隐藏的元素不占据任何空间
也不可以与用户产生交互

 #second{
        width: 50px;
        height:50px;
        border:1px black solid;
        background-color:lightblue;
        display: none;
    }

但是在DOM依然可以访问到这个元素，在开发者模式中也可以看到

          let a=document.getElementById("second");
          console.log(a);//<div id="second">

2.第二种 visibility:hidden

属性设置为hidden 隐藏这个元素，被隐藏的元素仍然在布局中，仍然占有他原来的位置
但是使用这个属性隐藏的元素不会与用户产生交互，假如隐藏的是一个按钮，点击按钮所在区域也不会触发方法，这就是与下一种透明度方法的主要区别

 #first{
        width: 50px;
        height:50px;
        border:1px black solid;
        background-color:lightgoldenrodyellow;
        visibility: hidden;
    }

3.第三种 opacity:0

这个方法就是设置一个元素的透明度，如果一个元素的透明度是0，那么就从视觉上消失了，但是仅仅是视觉，他还在页面上，只是我们看不到他，浏览器仍然渲染了这个元素，比如一个按钮元素设置透明度为0，我们看不到，但是点击这个透明的按钮，还是会触发这个按钮所绑定的方法
百度了一下这个英文单词，名词不透明性这个属性的属性值是0.0(完全透明) 到1.0(完全不透明)，我开始以为是百分比1到100呢，这是不透明性所以，设置为0，双重否定就是透明（写的有点绕大概就是这个意思吧）

    #third{
        width: 50px;
        height:50px;
        border:1px black solid;
        background-color:black;
        opacity: 0.0;
    }

完整代码可以试一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

    #first{
        width: 50px;
        height:50px;
        border:1px black solid;
        background-color:lightgoldenrodyellow;
        /*visibility: hidden;*/
    }
    #second{
        width: 50px;
        height:50px;
        border:1px black solid;
        background-color:lightblue;
        display: none;
    }
    #third{
        width: 50px;
        height:50px;
        border:1px black solid;
        background-color:black;
        /*opacity: 0.0;*/
    }

    #fourth{
        width: 50px;
        height:50px;
        border:1px black solid;
        background-color:black;
        clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

    }

    .container{
        height:400px;
        width:400px;
        background: lightcoral;
    }
</style>
<body>
<div class="container">
<div id="first"></div>
    <br>
<div id="second"></div>
    <br>
<div id="third" onclick="hello()"></div>
<br>
    <div id="fourth"></div>
    <script>
        function hello(){
            alert('HELLO WORLD');
        }
        let a=document.getElementById("second");
        console.log(a);
    </script>
</div>
</body>
</html>