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>
我所有了解就这几种,看了大神的文章,有用绝对定位的,有用clip-path的,各位想了解 直接百度一下就好