19.前端笔记-CSS-显示隐藏元素

1、元素的显示与隐藏

场景：网站广告，点击关闭就不见了，但是刷新页面，就会出现
本质：让一个元素在页面中隐藏或显示出来，隐藏不是删除

2、实现方式

2.1 display 显示隐藏（***）

display隐藏元素后，不展示，不占用原来位置

display:none;//隐藏对象
display:block;//1、转为块级元素；2、显示元素
1
2

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>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: green;
            display: none;
        }
        .box2{
            background-color: pink;
        }
    style>
head>
<body>
    <div class="box1"> div1 div>
    <div class="box2"> div2 div>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

隐藏前：
在这里插入图片描述
隐藏后：

2.2 visibility 可见性

visibility隐藏元素后，不展示，继续占用原来位置

visibility:visible;//元素可视
visibility:hidden;//元素隐藏
1
2

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>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: green;
            visibility: hidden;
        }
        .box2{
            background-color: pink;
        }
    style>
head>
<body>
    <div class="box1"> div1 div>
    <div class="box2"> div2 div>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在这里插入图片描述

2.3 overflow 溢出部分显示隐藏

有定位的盒子慎用隐藏
在这里插入图片描述

溢出表现：
在这里插入图片描述

overflow:hidden;//隐藏溢出部分
overflow:visible;//显示溢出部分
overflow:scroll;//溢出部分显示滚动条，没有溢出也显示
overflow:auto;//溢出的部分显示滚动条，没有溢出就不显示
1
2
3
4

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>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 50px;
            margin-top: 20px;
        }
        .box1{
            background-color: green;
            overflow: hidden;
        }
        .box2{
            background-color: pink;
            overflow:visible;
        }
        .box3{
            background-color: aquamarine;
            overflow: scroll;
        }
        .box4{
            background-color: orange;
            overflow: auto;
        }
    style>
head>
<body>
    <div class="box1"> div11111111111111111111111111111111111111 div>
    <div class="box2"> div22222222222222222222222222222 div>
    <div class="box3"> div3333333333333333333333333333 div>
    <div class="box4"> div444444444444444444444444444444div>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

在这里插入图片描述

3、练习

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>Documenttitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 30px auto;
            width: 444px;
            height: 300px;
            background-color: pink;
            position: relative;
        }
        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/arr.png) no-repeat center;
        }
        /* 鼠标经过box这个盒子时，就让里面的遮罩层显示出来 */
        .box:hover .mask{
            display: block;
        }

    style>
head>
<body>
    <div class="box">
        <img src="../images/tudou.jpg" alt="">
        <div class="mask">div>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

鼠标没有移动到图片上时：
在这里插入图片描述
鼠标移动到图片上：

元素隐藏显示

相关阅读:
攻防世界web篇-cookie
红黑树的性质与简单实现
 Git教程
 Fiddler之Replay功能详解
 在win系统安装部署svn服务及客户端使用
 Python学习 - 异常处理
 【JavaWeb】关于JWT做认证授权的十万个理由(JSON Web Token)
c++多态
 算法刷题网站总结
 胡思乱想 ----2022/11/10
原文地址：https://blog.csdn.net/Ambition_ZM/article/details/128179010