display: none、visibility:hidden和opacity: 0的区别

最新推荐文章于 2023-12-29 23:00:00 发布

今天会下雨吗

最新推荐文章于 2023-12-29 23:00:00 发布

阅读量1.2k

点赞数 4

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

本文链接：https://blog.csdn.net/weixin_45663697/article/details/117430490

版权

CSS 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

面试

13 篇文章 0 订阅

订阅专栏

1. display: none

设置该属性后，该元素和它所有的后代元素都会被隐藏。
无法使用屏幕阅读器等辅助设备访问

占据的空间消失

<div>
    <p>A没有设置display:none</p>
    <p style="display: none;">B设置display:none</p>
    <p>C没有设置display:none</p>
</div>

效果图
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l5InuVEE-1622468189715)(C:\Users\xmydd\AppData\Roaming\Typora\typora-user-images\image-20210531204829290.png)]$

2. visibility:hidden

隐藏元素仍需占用与未隐藏时一样的空间，任然会影响页面布局

<div>
    <p>A没有设置visibility: hidden</p>
    <p style="visibility: hidden;">B设置visibility: hidden</p>
    <p>C没有设置visibility: hidden</p>
</div>

效果图
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bfUyMp5a-1622468189719)(C:\Users\xmydd\AppData\Roaming\Typora\typora-user-images\image-20210531205218380.png)]$

3. opacity: 0

跟visibility:hidden一样，隐藏元素仍需占用与未隐藏时一样的空间，任然会影响页面布局。opacity设置了元素的透明度

<div>
    <p>A没有设置opacity: 0;样式</p>
    <p style="opacity: 0;">B设置opacity: 0;样式</p>
    <p>C没有设置opacity: 0;样式</p>
</div>

效果图
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qFNeHpid-1622468189736)(C:\Users\xmydd\AppData\Roaming\Typora\typora-user-images\image-20210531210543738.png)]$

4. 区别

display: none会产生回流和重绘，visibility:hidden;和opacity:0;只会引起页面重绘
visibility具有继承性，给父元素设置visibility:hidden;，子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
opacity也有继承性，但是父元素隐藏后，给子元素设opacity:1;，子元素也不会显示
opacity:0;隐藏后的元素可以点击
- 效果图

visibility: hidden和opacity:0不会影响计数器的计数。visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

<body>
    <div>
        <strong>给元素设置visibility:hidden样式</strong>
        <ol>
            <li>元素1</li>
            <li style="visibility:hidden;">元素2</li>
            <li>元素3</li>
            <li>元素4</li>
        </ol>
    </div>
    <div>
        <strong>给元素设置display:none样式</strong>
        <ol>
            <li>元素1</li>
            <li style="display:none;">元素2</li>
            <li>元素3</li>
            <li>元素4</li>
        </ol>
    </div>
</body>

$ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wGy87zrh-1622468189743)(C:\Users\xmydd\AppData\Roaming\Typora\typora-user-images\image-20210531213248979.png)]$

CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

今天会下雨吗

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
display: none、visibility:hidden和opacity: 0的区别

1. display: none设置该属性后，该元素和它所有的后代元素都会被隐藏。无法使用屏幕阅读器等辅助设备访问占据的空间消失<div> <p>A没有设置display:none</p> <p style="display: none;">B设置display:none</p> <p>C没有设置display:none</p></div>效果图2. vi
复制链接

扫一扫