前言

1.display显示隐藏

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

<style>
    div {
        display: block;  
        /* 同时具有转换为块级元素和显示元素的作用 */

        display: none;
        /* 具有隐藏对象的作用 */
    }
</style>

2.visibility显示隐藏

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

<style>
    div {
        visibility: visible;
        /* 元素可以被看见 */

        visibility: hidden;
        /* 元素不可见 */
    }
</style>

注意点：

visibility 隐藏元素后，继续占有原来的位置

3.overflow溢出显示隐藏

overflow 有四个属性能指定内容溢出后会发生的不同的变化

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

4.display与visibility的区别

设置了visibility：hidden的元素，占有原来的位置

    <style>
        div {
            width: 200px;
            height: 200px;
        }

        .first {
            visibility: none; 
            /* display: none; */
            background-color: lightblue;
        }

        .second {
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div class="first"></div>
    <div class="second"></div>
</body>

效果图~
在这里插入图片描述

设置了display：none的元素，不再占有原来的位置

0 条评论