HTML零基础-元素的显示与隐藏

在网站页面，经常有各种广告，当我们点击关闭按钮就不见了，但是我们重新刷新页面，会重新出现。

本质：让一个元素在页面中隐藏或显示出来。

一、 display 属性

display属性用于设置一个元素如何显示。

display.png

示例代码：

    <style>
        .peppa {
            /* 隐藏 */
            display: none;
            /* 显示 */
            /* display: block; */
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .George {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
    
    <div class="peppa">佩奇</div>
    <div class="george">乔治</div>

运行效果：

01.jpg

小结：

• display: none; 隐藏对象
• display: block;除了转换为块级元素之外，同时还有显示元素的意思。
• display 隐藏元素后，不再占有原来的位置。

display属性应用极其广泛，搭配JS可以做很多的网页特效。

二、 visibility 属性

visibility属性用于指定一个元素应可见还是隐藏。

visibility.png

示例代码：

  <style>
        .peppa {
            /* 隐藏 */
            /* display: none; */
            /* 显示 */
            /* display: block; */
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .George {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
<div class="peppa">佩奇</div>
<div class="george">乔治</div>

运行效果：

02.png

小结：

• visibility:visible;元素可视
• visibility:hidden;元素隐藏
• visibility 隐藏元素后，继续占有原来的位置。

⚠️display vs visibility区别：

• 如果隐藏元素想要原来位置，就用visibility:hidden;
• 如果隐藏元素不想要原来位置，就用display: none; (重点)

三、 overflow 属性

overflow属性制定了如果内容溢出一个元素的边框(超过其指定高度及宽度)时，会发生什么。

overflow.png

示例代码：

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

运行效果：

03.png

overflow属性小结：

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过图像尺寸的内容，超出部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出部分会影响布局。
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

总结：

• display 显示隐藏元素，但是不保留位置；
• visibil 显示隐藏元素，但是保留原来的位置；
• overf 溢出显示隐藏，但是只对于溢出的部分处理。

END !