css笔记14（元素的显示与隐藏）

最新推荐文章于 2024-07-25 08:14:42 发布

LiNO3

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量270

点赞数

分类专栏：笔记文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_60471941/article/details/122380324

版权

笔记专栏收录该内容

54 篇文章 2 订阅

订阅专栏

1.displiay

特点：隐藏后不保留位置

显示：display：block（除转换成块级元素外还有显示元素）

隐藏：display：none

 .yi {
            display: block;
            width: 400px;
            height: 400px;
            background-color: brown;
        }
        
        .er {
            display: block;
            width: 400px;
            height: 400px;
            background-color: blue;
        }

        .yi {
            display: none;
            width: 400px;
            height: 400px;
            background-color: brown;
        }
        
        .er {
            display: block;
            width: 400px;
            height: 400px;
            background-color: blue;
        }

2.visibility

特点：隐藏后保留位置

显示：visibility：visible

隐藏：visibility：hidden

 .san {
            visibility: visible;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        
        .si {
            visibility: visible;
            width: 400px;
            height: 400px;
            background-color: blue;
        }

        .san {
            visibility: hidden;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        
        .si {
            visibility: visible;
            width: 400px;
            height: 400px;
            background-color: blue;
        }

3.overflow

特点：隐藏超出盒子的内容

显示：overflow：visible

隐藏：visibility：hidden

用滚动条：overflow: scroll

溢出的时候使用滚动条：overflow: auto

有定位的时候慎用；

.wu {
            overflow: hidden;
            width: 40px;
            height: 40px;
            background-color: pink;
        }
        
        .lu {
            overflow: visible;
            width: 40px;
            height: 40px;
            background-color: blue;
        }
        
        .qi {
            overflow: scroll;
            width: 40px;
            height: 40px;
            background-color: pink;
        }

附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>遮罩</title>
    <style>
        .tu {
            position: relative;
            width: 180px;
            height: 95px;
            background-color: blueviolet;
            margin: auto;
        }
        
        .tu img {
            width: 100%;
            height: 100%;
        }
        
        .tu .mast {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
        }
        
        .tu:hover .mast {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tu">
        <div class="mast"></div>
        <img src="下载.png">
    </div>
</body>

</html>

正常时

鼠标移到到时：

LiNO3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css笔记14（元素的显示与隐藏）

1.displiay特点：隐藏后不保留位置显示：display：block（除转换成块级元素外还有显示元素）隐藏：display：none .yi { display: block; width: 400px; height: 400px; background-color: brown; } .er { display:
复制链接

扫一扫

专栏目录