CSS中visibility:hidden、display:none、opacity:0、rgba设置元素隐藏的区别

发布时间：2024-03-12 21:01:47 来源：网络

.

共同点： visibility:hidden、display:none、opacity:0三者都可以使元素隐藏区别在于： 1、visibility:hidde

共同点：

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内容请搜索好代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持好代码网！

以下您可能有感兴趣的文章: