2021-09-08 visibility:hidden与display:none的异同,opacity和rgba的异同

原创已于 2023-03-31 11:27:56 修改 · 76 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3 #透明度 #显示和隐藏

于 2021-09-08 21:32:57 首次发布

笔记专栏收录该内容

88 篇文章

订阅专栏

本文详细探讨了CSS中visibility:hidden与display:none的区别，包括它们在隐藏元素时对空间占用的影响。此外，还分析了opacity和rgba在设置透明度上的异同，特别是opacity如何影响后代元素的透明度。示例代码清晰地展示了这些概念的实际应用。

文章目录

1.visibility:hidden与display:none的区别

相同点

两者都可以实现控制DOM节点的显示和隐藏

隐藏:visibility:hidden与display:none
显示:visibility:visable与display:block

不同点

元素设置display:none后隐藏,同时该元素不会再占据空间,在html代码中也不会显示出来
元素设置visibility:hidden后隐藏,但是该元素仍然占据空间,在html代码中依旧存在,只是不可见

示例

//html
  <div class="tmd">
    <div class="box1">我是box1</div>
    <div class="box2">我是box2</div>
  </div>
//css
.box1{
	background: pink;
	visibility: hidden;

}
.box2{
	background: yellow;
	display: none;
}

效果:
在这里插入图片描述
只有设置了visibility:hidden的box1还能在HTML代码中存在

2.opacity和rgba的异同

相同点

两者都可以设置元素的透明度

不同点

rgba只会改变自身透明度(子元素不会继承其透明度)
opacity除了改变自身透明度外，其所有后代还会继承其透明度，
若后代需要改变自身的透明度，设置的值要小于等于其父元素的值。

示例

html:

    <!-- 透明度 -->
  <div class="tmd">
    <div class="box1">我是box1</div>
    <div class="box2">我是box2</div>
  </div>

css:

    .tmd{
      border:5px solid grey;
      /* background: gold; */
      /* opacity: .2; */
      background: rgba(252, 154, 6, 0.2);
    }
    .box1,.box2{
      width: 200px;
      height: 50px;
      color:blue;
      font-size:25px;
      display: flex;
      justify-content: center;
      align-items:center;
    }
    .box1{
      background: pink;

    }
    .box2{
      background: yellow;
    }