css中的display、visibility、opacity

rfalcon

已于 2022-05-19 09:53:10 修改

阅读量1k

点赞数 1

分类专栏： CSS 文章标签： css css3 html

于 2022-05-17 11:42:54 首次发布

本文链接：https://blog.csdn.net/rfalcon/article/details/124818324

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

opacity：用来设置透明度(0-1)
display：用来定义建立布局时元素生成的显示框的类型(‘block’,‘inline’,‘inline-block’,‘table’,‘none’,‘list-item’)
visibility：用来设置元素是否可见(‘visible’,‘hidden’)

是否占据了空间

opacity、visibility 不显示仍占据空间
display 不显示不占据空间

对子元素的影响

如果父元素和子元素的显隐性不同（父隐子显），opacity、display子元素的设置不起作用，显示效果和父元素一样
visibility 不受父元素影响，可以显示出来

是否影响其他元素的触发事件

visibility,display 不会影响其他元素触发事件
opacity 属性如果能遮住其他元素，其他元素则不能触发事件（用在一个遮罩覆盖底层页面，并且不触发底层事件，却能触发自身事件的情形）

是否产生了回流（reflow，页面中的一部门因为元素尺寸，布局，显隐等改变需要重新构建）

display 属性会产生回流
opacity，visibility 属性不会产生回流

是否产生重绘（repaint，页面一些元素需要更新，而这些属性只影响外观、风格，不影响布局）[回流必将引起重绘，而重绘不一定会引起回流]

display,opacity 属性会产生重绘
opacity 属性不一定会重绘（元素提升为合成层后，transform 和 opacity 不会触发 repaint，如果不是合成层，则其依然会触发 repaint）

是否支持transition

opacity 属性支持transition
visibility 属性也支持transition。visible-hidden的过渡有一个延时；hidden-visible的过渡没有延时。【注】触发自身事件时，元素不能完成从hidden-visible的过渡，但是触发其他元素的时候，可以完成该元素从visible-hidden-visible…的过渡效果
display 不仅不支持transition，还会使得transition失效（display:none;的元素不会渲染在页面上，而transition要起作用，元素必须已经循环在页面上）
如果必须要使用display属性，可以加定时器来解决，代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
    .blue{
        width:200px;
        height:200px;
        background:blue;
    }
    .yellow{
        width:100px;
        height:100px;
        background:yellow;
        display:none;
        opacity:0;
        transition:1s;
    }
  </style>
 </head>
 <body>
    <div class='blue'>
        <div class='yellow'></div>
    </div>
    <script>    
        var blue = document.querySelector('.blue');
        blue.addEventListener('mouseenter',function(){
            var yellowDiv = document.querySelector('.yellow');
            yellowDiv.style.display = 'block';
            setTimeout(function(){
                yellowDiv.style.opacity = '1';
            },0);
        })
    </script>
 </body>
</html>

补充 list-item,项目列表

<style>
 .list_box{
    display: list-item;
    list-style-type: disc;
  }
</style>
<div class="list_box">
  <p>name:alice</p> 
  <p>age:18</p>
</div>

rfalcon

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
css中的display、visibility、opacity

opacity：用来设置透明度(0-1)display：用来定义建立布局时元素生成的显示框的类型(‘block’,‘flex’,‘inline’,‘inline-block’,‘table’,‘none’)visibility：用来设置元素是否可见(‘visible’,‘hidden’)是否占据了空间opacity、visibility 不显示仍占据空间display 不显示不占据空间对子元素的影响如果父元素和子元素的显隐性不同（父隐子显），opacity、display子元素的设置.
复制链接

扫一扫

专栏目录