CSS基础: 元素隐藏和显示

最新推荐文章于 2023-05-26 18:05:58 发布

小猪弟

最新推荐文章于 2023-05-26 18:05:58 发布

阅读量446

点赞数

分类专栏： CSS 文章标签： css 隐藏显示 display visibility overflow

本文链接：https://blog.csdn.net/u011863822/article/details/123380763

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

现在聊一下常见的元素显示和隐藏，其实前面也用过，现在单独拿出来再聊一下。

主要说如果让一个元素在页面种隐藏或者显示出来。

display 属性隐藏显示

在这里插入图片描述

其实display前面也聊过，再元素标准类别转换中说过，本篇主要聊其在元素显示和隐藏的作用。

display : none : 隐藏元素
display ：block : 除了转换位块级元素之外，同时还有显示元素的意思。
display 隐藏元素后，不再占有原来的位置。

所以在网页种都会使用，所以大家应该掌握。

visibility 可见性

在这里插入图片描述

visibility : visible ：元素可见
visibility : hidden : 元素隐藏。
visiblity隐藏元素后，继续占有原来的位置

所以隐藏元素，如果还要占着原来位置就是用visibility来设置，如果隐藏元素不想占原来位置，就使用display 来设置（这个是使用的更多）。

两者的演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style type="text/css">

        .nav{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .s{
            width: 100px;
            height: 100px;
            background-color: #4a90e2;
        }
        .s1{
            background-color: #d10000;

        }
        .s1:hover{
            display: none;
        }
       .s2{
            background-color: #d10000;

        }
        .s2:hover{
            visibility: hidden;
        }


    </style>
</head>
<body>
<div class="nav">
<div class="s s1"></div>
<div class="s"></div>
</div>
&nbsp;
&nbsp;
&nbsp;
<div class="nav">
<div class="s s2"></div>
<div class="s"></div>
</div>
</body>
</html>

在这里插入图片描述

overflow

这个是溢出隐藏，而不是对整个元素隐藏。

在这里插入图片描述

直接演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style type="text/css">

        .nav{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        .c2{
            overflow: hidden;
        }
        .c3{
            overflow: scroll;
        }
        .c4{
            overflow: scroll;
        }
        .c5{
            overflow:auto ;
        }
        .c6{
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="nav">
     “谁会来这个地方，还能发现尸体？”从警车里面走出的一个中年男子
</div>
&nbsp;
&nbsp;
&nbsp;
<hr/>
&nbsp;
&nbsp;
&nbsp;
<div class="nav c2">
    “谁会来这个地方，还能发现尸体？”从警车里面走出的一个中年男子
</div>
&nbsp;
&nbsp;
&nbsp;
<hr/>
&nbsp;
&nbsp;
&nbsp;
<div class="nav c3">
     “谁会来这个地方，还能发现尸体？”从警车里面走出的一个中年男子
</div>
&nbsp;
&nbsp;
&nbsp;
<hr/>
&nbsp;
&nbsp;
&nbsp;
<div class="nav c4">

</div>
&nbsp;
&nbsp;
&nbsp;
<hr/>
&nbsp;
&nbsp;
&nbsp;
<div class="nav c5">
     “谁会来这个地方，还能发现尸体？”从警车里面走出的一个中年男子
</div>
&nbsp;
&nbsp;
&nbsp;
<hr/>
&nbsp;
&nbsp;
&nbsp;
<div class="nav c6">

</div>
</div>
</body>
</html>

在这里插入图片描述

虽然用文本进行演示，如果其中的内容是其它的标签也会有这个效果。

小猪弟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础: 元素隐藏和显示

现在聊一下常见的元素显示和隐藏，其实前面也用过，现在单独拿出来再聊一下。主要说如果让一个元素在页面种隐藏或者显示出来。display 属性隐藏显示其实display前面也聊过，再元素标准类别转换中说过，本篇主要聊其在元素显示和隐藏的作用。display : none : 隐藏元素display ：block : 除了转换位块级元素之外，同时还有显示元素的意思。display 隐藏元素后，不再占有原来的位置。所以在网页种都会使用，所以大家应该掌握。visibility 可见性
复制链接

扫一扫