display:none和visibility:hidden的区别

最新推荐文章于 2024-06-05 00:48:32 发布

one or two

最新推荐文章于 2024-06-05 00:48:32 发布

阅读量63

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_41633396/article/details/116735395

版权

先演示什么都不设置的情况

<!DOCTYPE html>
<html lang="zh">
    <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>
            .box1{
                width:200px;
                height:200px;
                background-color: #bfa;
            }
            .box2{
                width:200px;
                height:200px;
                background-color: pink;
                /* visibility:hidden; */
                /* display:none; */
            }
            .box3{
                width:200px;
                height:200px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

对应的效果图

在这里插入图片描述

现在将第二个box（box2）设置为visibility:hidden

在这里插入图片描述

此时，如果在box2里面加入后代元素，后代元素会显示吗？如果，不显示，需要怎么做，让他们显示？

<!DOCTYPE html>
<html lang="zh">
    <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>
            .box1{
                width:200px;
                height:200px;
                background-color: #bfa;
            }
            .box2{
                width:200px;
                height:200px;
                background-color: pink;
                visibility:hidden;
                /* display:none; */
            }
            .box4{
                width:200px;
                height:100px;
                background-color: red;
                /* visibility:visible; */
            }
            .box3{
                width:200px;
                height:200px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2">
            <div class="box4"></div>
        </div>
        <div class="box3"></div>
    </body>
</html>

在这里插入图片描述

发现，其后代元素也不会显示出来，但是，如果给后代元素加上visibility:visible后，会发现后代元素显示出来了

在这里插入图片描述

现在给box2设置为display:none看看什么效果

<!DOCTYPE html>
<html lang="zh">
    <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>
            .box1{
                width:200px;
                height:200px;
                background-color: #bfa;
            }
            .box2{
                width:200px;
                height:200px;
                background-color: pink;
                /* visibility:hidden; */
                display:none;
            }
            .box3{
                width:200px;
                height:200px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

在这里插入图片描述

会发现，box2会完全消失，不占用文档的位置

总结：visibility:hidden会隐藏某个元素，但是该元素仍然会在文档中占位置，display:none后，该元素不会在文档中占任何位置（尤其注意上面的那个display:none不写后，box2又会出现在文档中，而且box3会向移动）

京东的这个下拉显示框，该怎么处理呢？

在这里插入图片描述

这个很明显，这个下拉框有时不会出现，有时会出现，而且这个框是属于不占文档位置的那种，因此这里考虑用display:none。但是为了不影响这个下拉宽出现的时候，影响其它元素的布局，可以对该下拉框所属的元素，设置定位（根据需要选择何种定位），（为什么不考虑使用浮动呢？想想为什么？）后面做完这个对应的练习，再来解释。

注意，在写界面的时候，大范围的布局使用款元素和浮动来解决，细节处使用定位

one or two

关注

0
点赞
踩
0

收藏

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

先演示什么都不设置的情况<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=
复制链接

扫一扫