css如何不显示元素？

来源：互联网发布：蓝果网络编辑：程序博客网时间：2024/05/18 03:26

可以通过以下两种方法不显示元素

（1）display: none;

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style type="text/css">    .box {        width: 160px;        height: 100px;        background: #cad5eb;    }    .title {        height: 40px;        background: #54a962;    }    .content {        height: 60px;        background: #5650bb;    }    </style></head><body>    <div class="box">        <h3 class="title">标题</h3>        <p class="content">内容</p>    </div></body></html>

这里写图片描述

设置display: none;后的效果如下显示

这里写图片描述

可以看出原来的标题部分不见了，而内容部分占领了原来标题的部分

（2）visibility: hidden;

还是上面的例子，只是这次将display:none;改成visibility: hidden; 但结果却大不相同

这里写图片描述

可以看到原本的标题位置没有了，但是内容部分并填充上去，依旧在原有的位置

（完）

阅读全文

0 0