CSS——display:none与visibility:hidden的区别

最新推荐文章于 2024-05-03 12:12:21 发布

chengzhangdewo

最新推荐文章于 2024-05-03 12:12:21 发布

阅读量1k

点赞数 1

文章标签： css

原文链接：https://blog.csdn.net/qq_41818857/article/details/103946894

版权

隐藏元素的方法有很多，比如：让元素变透明：opcity:0,设置display:none，或设置visibility:hidden。

1、display:none
给元素设置了display：none后，那么该元素及其后代都会被隐藏，在页面中看不见点不到，但是它还存在于页面中，只是它不占据空间，对后面的元素布局没有任何影响。

2、visibility:hidden
visibility:hidden与display：none有同样的作用，不同的是设置了它之后，元素会占据原本的空间，会影响后面元素的布局

display:none与visibility:hidden的区别
1、display:none它不占据空间，对后面的元素布局没有任何影响，visibility:hidden会占据原本的空间，会影响后面元素的布局。

2、如果给父元素设置display:none，给它的子元素设置display:block，结果子元素还是不能显示出来，如果给父元素设置visibility:hidden，给它的子元素设置visibility: visible;，结果子元素可以显示出来。

3、visibility: hidden不会影响计数器的计数，虽然让一个元素隐藏了，但是它仍然被算进去了。而display: none会被忽略。

<body>
        <div>
            <ol>
                <li>苹果</li>
                <li style="visibility: visible;">visibility: visible</li>
                <li>香蕉</li>
                <li>梨子</li>
            </ol>
        </div>
        <div>
            <ol>
                <li>桃子</li>
                <li style="display:none;">display:none</li>
                <li>西瓜</li>
                <li>哈密瓜</li>
            </ol>
        </div>
    </body>

在这里插入图片描述

4、CSS3的transition支持visibility属性，但是不支持display。
————————————————
版权声明：本文为CSDN博主「ohmorning」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41818857/article/details/103946894

chengzhangdewo

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS——display:none与visibility:hidden的区别

隐藏元素的方法有很多，比如：让元素变透明：opcity:0,设置display:none，或设置visibility:hidden。1、display:none给元素设置了display：none后，那么该元素及其后代都会被隐藏，在页面中看不见点不到，但是它还存在于页面中，只是它不占据空间，对后面的元素布局没有任何影响。2、visibility:hiddenvisibility:hidden与display：none有同样的作用，不同的是设置了它之后，元素会占据原本的空间，会影响后面元素的布局
复制链接

扫一扫