css vissibility显示隐藏元素

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

lxl211

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

阅读量960

点赞数

分类专栏： css 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/lxllxl211/article/details/127175415

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

visibility属性用于指定一个元素应该可见还是隐藏
visibility: visible; 元素可见
visibility: hidden; 元素隐藏

visibility: hidden;隐藏元素后，继续占有原来的位置
display：none；隐藏元素后，不占有不占有原先的位置

代码例子：

<style>
        .a1{
            /*visibility: hidden;隐藏元素后，继续占有原来的位置  
            display：none；隐藏元素后，不占有不占有原先的位置
            */
            /* visibility: hidden; */
            width: 111px;
            height: 111px;
            background-color: aqua;
        }

        .a2{  
            width: 111px;
            height: 111px;
            background-color: rgb(206, 48, 137);
        }
    </style>
</head>
<body>
    <div class="a1">a1</div>
    <div class="a2">a2</div>
</body>

运行结果：
在这里插入图片描述
把visibility: hidden;取消注释后
的运行结果：

visibility: hidden;隐藏元素后，继续占有原来的位置。所以会出现空白页面

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lxl211

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css vissibility显示隐藏元素

隐藏元素后，继续占有原来的位置。隐藏元素后，继续占有原来的位置。隐藏元素后，不占有不占有原先的位置。visibility属性用于指定一个元素应该可见还是隐藏。把visibility: hidden;
复制链接

扫一扫