CSS学习笔记之元素显示与隐藏 3.9

1 前言

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

1. display 显示隐藏

2. visibility 显示隐藏

3. overflow 溢出显示隐藏

2 display

display主要属性：

display: none ；隐藏对象

display：block ；除了转换为块级元素之外，同时还有显示元素的意思

注意： display 隐藏元素后，不再占有原来的位置。

.box {
            display: none;
            /* display: block; */
            width: 200px;
            height: 200px;
            background-color: red;

        }

3 visibility

visibility主要属性：

visibility：visible ; 元素可视

visibility：hidden; 元素隐藏

注意：

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

如果隐藏元素想要原来位置， 就用 visibility：hidden

如果隐藏元素不想要原来位置， 就用 display：none (用处更多）

 .box {
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: red;

        }

4 overflow

overflow属性：

.box {
            /* overflow: visible; */
            /* overflow: hidden; */
            /* scroll 溢出的部分显示滚动条  不溢出也显示滚动条 */
            /* overflow: scroll; */
            /* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
            /* overflow: auto; */
            width: 200px;
            height: 200px;
            border: 3px solid pink;
            margin: 100px auto;
        }