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

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

元素隐藏显示

相关阅读:
网安播报|MOVEit 被发现9.1 分高危漏洞，威胁全球 2700 多家组织
 全国双非院校考研信息汇总整理 Part.5
旅游景区IP网络广播系统方案-旅游风景区景点IP网络广播建设指南
 xtrabackup 2.4 的介绍与使用
 Taurus.MVC 微服务框架入门开发教程：项目集成：2、客户端：ASP.NET Core（C#）项目集成：应用中心。
根据经纬度坐标获得省市区县行政区划城市名称，自建数据库 java python php c# .net 均适用
 6.11.面图层（Polygon）
Java测试框架：分享常用的Java测试框架，如JUnit, TestNG等，包括单元测试，集成测试，性能测试等
 【快乐离散数学】谓词与量词 | 嵌套量词 | 狄摩根定律 | Predicates and Quantifiers | Nested Quantifiers
java基础语法2-标识符和关键字
原文地址：https://blog.csdn.net/Ambition_ZM/article/details/128179010