总结

前言

在CSS中，隐藏和显示是我们经常会用到的方法，最常用的方法有三种：display、visibility、overflow。它们的主要目的是让一个元素在页面中消失，但并不是让它们被删除掉，比如网页中的小广告，关掉以后再次刷新页面又会重新出现。

一、display

要点：display元素隐藏后，不再占有原来的位置。

用途：配合js做特效，比如下拉菜单，原先没有，鼠标经过显示下拉菜单，应用极为广泛。

display：none（隐藏元素）

display：block（除了转换为块级元素外，还有显示元素的意思）

示例：

<!DOCTYPE html>
<html lang="en">

<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>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }
        
        .tudou img {
            width: 100%;
            height: 100%;
        }
        
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4) url(../images/arb.png) no-repeat center;
        }
        
        .tudou:hover .mask {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="../images/tb.png">
    </div>
</body>

</html>

效果如图所示：

可以看到当鼠标没有放到图片上时，图片正常显示，当鼠标放到图片上时，图片原本隐藏的内容就会出现。

二、visibility

要点：visibility元素隐藏后，继续占有原来的位置。

用途：使用较少。

visibility：visible（显示元素）

visibility：hidden（隐藏元素）

三、overflow

要点：只是隐藏超出大小的部分。

用途：可以清除浮动，可以保证盒子里面的内容不会超出该盒子范围。

overflow：visible（显示元素）

overflow：hidden（隐藏元素）

overflow：scroll（内容超出盒子后显示滚动条）

overflow: auto（文字内容没有超出盒子内容时没有滚动条，当超出时显示滚动条）

示例：

<!DOCTYPE html>
<html lang="en">

<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>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid skyblue;
            overflow: scroll;
            overflow: auto;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <div>
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    </div>
</body>

</html>

效果如图所示：

总结

以上就是今天要讲的内容，本文仅仅简单介绍了CSS隐藏和显示的使用，还需要多做练习熟练这些方法。

原文链接：https://blog.csdn.net/weixin_44703582/article/details/120765342