HTML(Basic) Chapter6(Pink)元素的显示与隐藏

最新推荐文章于 2022-12-11 21:45:50 发布

FeverTwice

最新推荐文章于 2022-12-11 21:45:50 发布

阅读量360

点赞数

分类专栏： CSS之路 HTML之路文章标签： css3 css html html5 前端

本文链接：https://blog.csdn.net/LeungSr/article/details/118932107

版权

HTML之路同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

CSS之路

27 篇文章 0 订阅

订阅专栏

文章目录

1.基础知识
2.display和visibility
- 最终效果
- - display效果
  - visibility效果
2.OVERFLOW隐藏
- 源代码（overflow_1.html）
- 最终效果
写在最后

1.基础知识

为什么要使用隐藏

类似网站上的一些广告，当我们点击关闭的时候就突然不见了（点击关闭），但是我们重新刷新的时候页面将会再次出现
本质就是让一个元素在页面中隐藏或者显示出来

display属性

display:none 隐藏对象
display:block除了块级元素之外还有显示元素的意思

**display的特性**

display原来的部分不仅不见了，而且位置也不见了
对于后面的应用较为广泛，同时还有显示元素的意思

**visibility的特性**

visibility: hidden

隐藏之后元素还保留原来的位置

2.display和visibility

<!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>
        .peppa {
            visibility: hidden;
            /* display: none; */
            width: 200px;
            height: 200px;
            background-color: pink;
        }

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

<body>
    <div class="peppa">佩奇</div>
    <div class="george">乔治</div>
</body>

</html>

最终效果

display效果

visibility效果

2.OVERFLOW隐藏

有的时候我们盒子太小，文字太多，会有文字元素溢出
其默认显示是溢出显示的，等价于overflow:visible
使用overflow：hidden
或者overflow：scroll（显示滚动条）
溢出内容会影响网页布局
注意:使用了定位的盒子慎用溢出功能

源代码（overflow_1.html）

<!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>
        .peppa {
            /* overflow: hidden; */
            overflow: scroll;
            width: 200px;
            height: 200px;
            border: 3px solid pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="peppa">
        《小猪佩奇》，又译作《粉红猪小妹》是由英国人阿斯特利（Astley）、贝克（Baker）、戴维斯（Davis）创作、导演和制作的一部英国学前电视动画片，原名为《Peppa
        Pig》，也是历年来最具潜力的学前儿童品牌。故事围绕小猪佩奇与家人的愉快经历，幽默而有趣，藉此宣扬传统家庭观念与友情，鼓励小朋友们体验生活。
    </div>
</body>

</html>