欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中visibility:hidden、display:none、opacity:0、rgba設(shè)置元素隱藏的區(qū)別

  發(fā)布時(shí)間：2023-06-19 16:07:51   作者：持久的棒棒君   我要評(píng)論
本文主要介紹了CSS中visibility:hidden、display:none、opacity:0、rgba設(shè)置元素隱藏的區(qū)別，具有一定的參考價(jià)值，感興趣的可以了解一下

共同點(diǎn)：

visibility:hidden、display:none、opacity:0三者都可以使元素隱藏

區(qū)別在于：

1、visibility:hidden 保留dom節(jié)點(diǎn)，元素在文檔流中占據(jù)空間，不引起重排和回流；父元素設(shè)置該屬性時(shí)，子元素同樣會(huì)生效，但可以通過visibility:visible;修改子元素的顯示效果；

2、display:none 不保留dom節(jié)點(diǎn)，元素直接從文檔流中刪除，引起重排和回流，子元素同樣被刪除；

3、opacity:0 設(shè)置元素透明度為0，保留dom節(jié)點(diǎn)，元素在文檔流中占據(jù)空間，子元素會(huì)繼承父元素的opacity特性，但是子元素設(shè)置opacity:1;同樣不會(huì)顯示出來。

4、通過給元素設(shè)置rgba(x,x,x,0)為透明隱藏效果，但仍然會(huì)占據(jù)一片空間，且子元素不會(huì)受到影響

<!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>

到此這篇關(guān)于CSS中visibility:hidden、display:none、opacity:0、rgba設(shè)置元素隱藏的區(qū)別的文章就介紹到這了,更多相關(guān)CSS visibility:hidden、display:none、opacity:0、rgba內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論