visibility和display隐藏的区别

最新推荐文章于 2024-06-13 10:27:10 发布

riverrun_z

最新推荐文章于 2024-06-13 10:27:10 发布

阅读量93

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_48047636/article/details/124189842

版权

diaplay:none的隐藏是指元素消失

html代码

<body>
    <h1>显示与隐藏</h1>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
    <h1>动画隐藏</h1>
    <div class="item5"></div>
    <input type="button" id="btn" value="隐藏">
</body>

CSS代码–> diaplay:none

 <style>
        .item2,.item3,.item4,.item5{
            width: 290px;
            height: 40px;
        }
        .item2{
            background-color: rgb(191, 147, 233);
        }
        .item3{
            background-color: rgb(123, 212, 232);
            display: none;
            /* visibility: hidden; */
        }
        .item4{
            background-color: rgb(246, 169, 124);    
        }
        .item5{
            background-color: rgb(221, 134, 150);
        }
    </style>

结果截图–>display:none后元素消失,后面的元素替代原来的元素

在这里插入图片描述

CSS代码–> visibility:hidden

 <style>
        .item2,.item3,.item4,.item5{
            width: 290px;
            height: 40px;
        }
        .item2{
            background-color: rgb(191, 147, 233);
        }
        .item3{
            background-color: rgb(123, 212, 232);
            /* display: none; */
            visibility: hidden;
        }
        .item4{
            background-color: rgb(246, 169, 124);    
        }
        .item5{
            background-color: rgb(221, 134, 150);
        }
    </style>

结果截图–>visibility:hidden后,元素隐藏,但位置还在

在这里插入图片描述

riverrun_z

关注

0
点赞
踩
0

收藏

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

diaplay:none的隐藏是指元素消失html代码<body> <h1>显示与隐藏</h1> <div class="item2"></div> <div class="item3"></div> <div class="item4"></div> <h1>动画隐藏</h1> <div class="item5"&g
复制链接

扫一扫