一文搞懂CSS中的元素显示

诺坎普的风间

已于 2023-03-28 11:34:52 修改

阅读量291

点赞数

分类专栏：前端只因变凤凰之路文章标签： css 前端 html css的元素显示元素显示

于 2023-03-28 10:29:26 首次发布

本文链接：https://blog.csdn.net/weixin_62588253/article/details/129809821

版权

前端只因变凤凰之路专栏收录该内容

50 篇文章 2 订阅

订阅专栏

🌟所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉文章简介：本文介绍CSS的元素显示相关知识。知识学习内容来自b站的@黑马程序员的视频

场景：类似网站广告，当我们点击关闭就不见了，但是重新刷新页面又会出来！本质就是让一个元素在页面中隐藏或者显示出来

🔥display显示隐藏（重要）

display:none 就是隐藏对象

<!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>
        .peiqi {
            display: none;
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        .qiaozhi {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="peiqi">
        佩奇
    </div>
    <div class="qiaozhi">
        乔治
    </div>
</body>

</html>

display:block 除了转换为块级元素外，同时还有显示元素的意思

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

后面应用极其广泛，配合JS可以做很多网页的特效

🔥visibility显示隐藏

visibility:visible；元素可视

visibility:hidden；元素隐藏

<!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>
        .peiqi {
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        .qiaozhi {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="peiqi">
        佩奇
    </div>
    <div class="qiaozhi">
        乔治
    </div>
</body>

</html>

visibility隐藏元素后继续占有原来的位置

🔥overflow溢出显示隐藏

不是对所有元素隐藏，而是对溢出的部分进行隐藏

添加溢出隐藏后

<!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>
        .peiqi {
            display: none;
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        .qiaozhi {
            overflow: hidden;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="peiqi">

    </div>
    <div class="qiaozhi">
        2022年的FIFA年终排名，巴西积1840.77分，排名世界第1；阿根廷积1838.38分，排在世界第2；法国积1823.39分，排名世界第3。想要提升FIFA排名，难度也不小——阿根廷夺得世界杯冠军，月度积分也只涨了64.5分。

        3月份的FIFA比赛日，一场友谊赛的结局，改变了世界第1和第2的位置。

        摩洛哥2-1击败巴西，这样的比分，倒也算不上是冷门：摩洛哥是世界杯4强球队，巴西是世界杯8强球队。
    </div>
</body>

</html>

当然还有两个属性scroll是无论溢出还是不溢出都显示滚动条，而auto是在多的溢出时才显示滚动条

注意：一般情况下我们都不想让溢出部分显示出来，因为会影响布局；但是如果有定位的盒子，请慎用溢出隐藏，因为它会隐藏掉你故意要露在盒子外的部分。

🔥土豆网案例：当鼠标经过时显示遮罩

核心原理：原来有一个半透明的黑色遮罩看不见，但是鼠标经过大盒子时候就显示出来。同时遮罩的盒子不占有位置，就需要绝对定位和display搭配使用。

<!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, .4) url(images/播放.png) no-repeat center;
        }

        .tudou:hover .mask {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/土豆.jpg" alt="">
    </div>
</body>

</html>