CSS中visibility:hidden、display:none、opacity:0、rgba设置元素隐藏的区别
发布时间：2023-06-19 16:07:51 作者：持久的棒棒君 
我要评论
我要评论本文主要介绍了CSS中visibility:hidden、display:none、opacity:0、rgba设置元素隐藏的区别，具有一定的参考价值，感兴趣的可以了解一下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
共同点：
visibility:hidden、display:none、opacity:0三者都可以使元素隐藏
区别在于：
1、visibility:hidden 保留dom节点，元素在文档流中占据空间，不引起重排和回流；父元素设置该属性时，子元素同样会生效，但可以通过visibility:visible;修改子元素的显示效果；
2、display:none 不保留dom节点，元素直接从文档流中删除，引起重排和回流，子元素同样被删除；
3、opacity:0 设置元素透明度为0，保留dom节点，元素在文档流中占据空间，子元素会继承父元素的opacity特性，但是子元素设置opacity:1;同样不会显示出来。
4、通过给元素设置rgba(x,x,x,0)为透明隐藏效果，但仍然会占据一片空间，且子元素不会受到影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.father1{
height: 200px;
width: 200px;
background-color: #aabbcc;
margin-top:20px;
display: none;
}
.son1{
height: 100px;
width: 100px;
background-color: #eeaaee;
display: block;
}
.father2{
opacity: 0;
height: 200px;
width: 200px;
background-color: #aabbcc;
margin-top:20px;
opacity: 0;
}
.son2{
height: 100px;
width: 100px;
background-color: #eeaaee;
opacity: 1;
}
.father3{
visibility: hidden;
height: 200px;
width: 200px;
background-color: #aabbcc;
margin-top:20px;
visibility: hidden;
}
.son3{
height: 100px;
width: 100px;
background-color: #eeaaee;
visibility: visible;
}
</style>
</head>
<body>
<div class="father1">
<div class="son1"></div>
</div>
<div class="father2">
<div class="son2"></div>
</div>
<div class="father3">
<div class="son3"></div>
</div>
<script></script>
</body>
</html>到此这篇关于CSS中visibility:hidden、display:none、opacity:0、rgba设置元素隐藏的区别的文章就介绍到这了,更多相关CSS visibility:hidden、display:none、opacity:0、rgba内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
css之Display、Visibility、Opacity、rgba和z-index: -1的区别
这篇文章主要介绍了css之Display、Visibility 和 Opacity 的区别,方便我们后期根据需要选择，需要的朋友可以参考下2020-11-07CSS 中的 display、visibility,和opacity 的区别解析
display 主要影响元素在布局中的显示方式，可以完全隐藏元素并且不占据空间；visibility 控制元素的可见性，隐藏元素时仍然占据空间；opacity 控制元素的透明度，改变元素2023-11-07
最新评论