元素的显示、隐藏、遮罩

妍华之喜

已于 2022-04-27 19:19:25 修改

阅读量460

点赞数 2

文章标签： css html 前端

于 2020-11-20 09:03:00 首次发布

本文链接：https://blog.csdn.net/XVJINHUA954/article/details/109838226

版权

元素的显示、隐藏、遮罩

今天我们来讲元素的显示隐藏和遮罩,隐藏顾名思义就是我们可以通过一些方法将元素先隐藏起来,等到需要使用的时候,我们在将元素显示出来,这就是元素的隐藏,其中遮罩是最最经典的案例.

display

display属性除了可以把一个元素转化为行内元素，块元素和行内块元素以外还可以设置一个元素的显示和隐藏
display: none;元素显示隐藏但是不会保留原来的位置
display:block;转换为块元素以后，元素会显示出来,此元素前后会带有换行符。

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display显示与隐藏</title>
    <style>
        .peiqi {
            /* display: block; */
            display: none;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .qiaozhi {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
        <div class="peiqi">佩奇</div>
        <div class="qiaozhi">乔治</div>
</body>
</html>

visibility

visibility 属性规定元素是否可见.(即使不可见的元素也会占据页面上的空间)
visibility:visible；元素显示不隐藏,保留元素原来的位置
visibility:hidden;元素显示隐藏,保留元素原来的位置

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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: red;
        }
    </style>
</head>
<body>
    <div class="peiqi">佩奇</div>
    <div class="qiaozhi">乔治</div>
</body>
</html>

overflow

overflow属性是设置元素溢出部分的显示与隐藏,就是对于元素溢出部分的一个处理

`overflow`属性指定了如果内容溢出一个元素的框，会发生什么?

overflow属性的属性值

visible不剪切溢出的内容也不添加滚动条
hidden不显示超出对象尺寸的内容，超出部分对其进行隐藏
scroll不管超出多少，总是左右上下都显示滚动条
auto超出的部分自动加滚动条，不超出的部分不加滚动条

案例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .peiqi {
            /* 不剪切 不加滚动条 */
            overflow: visible;
            /* 超出部分隐藏 */
            overflow: hidden;
            /* 整体加个滚动条 */
            overflow: scroll;
            /* 溢出的时候加滚动条，不溢出不加滚动条 */
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 3px solid pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="peiqi">
        佩奇是一只非常可爱的小猪，她和母父、弟弟乔治生活在一起。她喜欢的玩具是泰迪。她最喜欢跳泥坑，最喜欢吃的是意大利面和巧克力蛋糕，最喜欢扮成小仙女公主，最喜欢喝橙汁，也很喜欢回姥姥姥爷、伯父伯母家玩。
        佩奇的姥姥应该叫猪姥姥，但是翻译错了，成了猪奶奶。
        就像唐老鸭的舅舅：史高治·麦克达克。最初翻译成了叔叔。
        就像唐老鸭的甥儿：辉儿·达克/Huey Duck、杜儿·达克/Dewey Duck、路儿·达克/Louie Duck（唐纳德的甥男们）。最初也翻译错了。成了侄儿。
    </div>
</body>

</html>

土豆网遮罩综合案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>土豆</title>
    <style>
        .box {
            width: 360px;
            height: 250px;
            background-color: #ffc0cb;
            margin: 100px auto;
            position: relative;

        }

        img {
            width: 100%;
            height: 100%;
        }

        .box1 {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(img/arr.png) no-repeat center;
            position: absolute;
            top: 0px;
            left: 0px;
            display: none;
        }

        .box:hover .box1 {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="img/tudou.jpg" alt="">
        <div class="box1"></div>
    </div>
</body>

</html>

妍华之喜

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素的显示、隐藏、遮罩

元素的显示、隐藏、遮罩今天我们来讲元素的显示隐藏和遮罩,隐藏顾名思义就是我们可以通过一些方法将元素先隐藏起来,等到需要使用的时候,我们在将元素显示出来,这就是元素的隐藏,其中遮罩是最最经典的案例.displaydisplay属性除了可以把一个元素转化为行内元素，块元素和行内块元素以外还可以设置一个元素的显示和隐藏display: none;元素显示隐藏但是不会保留原来的位置display:block;转换为块元素以后，元素会显示出来,此元素前后会带有换行符。案例:<!DOCTYPE
复制链接

扫一扫