【静态页面】CSS的显示与溢出

CSS架构

显示与溢出；

1.显示；

display属性；

以display设置隐藏效果和元素类型

<style>
        div {
            width: 200px;
            height: 200px;
        }
        #qq {
            background-color: blue;
        }
        #yy {
            background-color: red;
            /*
                display: none 设置当前元素为隐藏效果
                * 这种方式将元素设置为隐藏后，该元素不会再占有页面空间
                通过display属性将元素显示
                * block - 将元素设置为块级元素
                * inline - 将元素设置为内联元素
                * inline-block - 将元素设置为行内元素
             */
            display: inline-block;
        }
        #cc {
            background-color: yellow;
        }

    </style>

visibility属性；

以visibility设置，元素显示或隐藏和同时占据原有位置

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