CSS：元素的显示与隐藏（display、visibility、overflow）

时间 2020-06-25 标签 css 元素显示隐藏 display visibility overflow

一、display显示与隐藏css

（1）display的属性值html

none：隐藏元素spa

block：转换为块级元素、显示元素3d

（2）隐藏code

不添加隐藏盒子的属性htm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test1 {
                background-color: yellow;
                width: 200px;
                height: 200px;
            }
            .test2{
                background-color: red;
                width: 200px;
                height: 200px;
            }
    
        </style>
    </head>

    <body>
        <div class="test1"></div>    
        <div class="test2"></div>
    
    </body>
</html>

添加属性隐藏第一个黄色的盒子：对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test1 {
                background-color: yellow;
                width: 200px;
                height: 200px;
                display: none;
            }
            .test2{
                background-color: red;
                width: 200px;
                height: 200px;
            }
    
        </style>
    </head>

    <body>
        <div class="test1"></div>    
        <div class="test2"></div>
    
    </body>
</html>

隐藏元素后，再也不占有原来的位置blog

（3）显示继承

将属性的值改成block便可：utf-8

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test1 {
                background-color: yellow;
                width: 200px;
                height: 200px;
                display: block;
            }
            .test2{
                background-color: red;
                width: 200px;
                height: 200px;
            }
    
        </style>
    </head>

    <body>
        <div class="test1"></div>    
        <div class="test2"></div>
    
    </body>
</html>

二、visibility显示隐藏

（1）属性的值

inherit：继承上一个父对象的可见性

visible：显示

hidden：隐藏

（2）隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test1 {
                background-color: yellow;
                width: 200px;
                height: 200px;
                visibility: hidden;
            }
            .test2{
                background-color: red;
                width: 200px;
                height: 200px;
            }
    
        </style>
    </head>

    <body>
        <div class="test1"></div>    
        <div class="test2"></div>
    
    </body>
</html>

隐藏元素后继续占有原来的位置，与hidden最大的区别就是是否保留原来的位置。

三、overflow溢出显示隐藏

对溢出的内容作一个设定。

（1）先设置一个存在溢出现象的盒子，对溢出的文字不作处理：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test1 {
                background-color: yellow;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>

    <body>
        <div class="test1">大道如青天，我独不得出。
　
　　羞逐长安社中儿，赤鸡白雉赌梨栗。
　
　　弹剑做歌奏苦声，曳裾王门不称情。
　
　　淮阴市井笑韩信，汉朝公卿忌贾生。
　
　　君不见昔时燕家重郭隗，拥篲折节无嫌猜。
　
　　剧辛乐毅感恩分，输肝剖胆效英才。
　
　　昭王白骨萦蔓草，谁人更扫黄金台？
　
　　行路难，归去来！</div>    
    </body>
</html>

（2）不显示，默认是显示的：

    <style type="text/css">
            .test1 {
                background-color: yellow;
                width: 200px;
                height: 200px;
              overflow: hidden;
            }
        </style>

多出来的文字是隐藏的。

（3）显示：

    .test1 {
                background-color: yellow;
                width: 200px;
                height: 200px;
                overflow:visible;
            }

（4）滚动条：

        <style type="text/css">
            .test1 {
                background-color: yellow;
                width: 200px;
                height: 200px;
                overflow:scroll;
            }
        </style>

以滚动条的形式来查看全部的内容

（5）滚动条auto：

    <style type="text/css">
            .test1 {
                background-color: yellow;
                width: 200px;
                height: 200px;
                overflow:auto;
            }
        </style>

只有在超出区域的时候显示滚动条，而scroll无论超出了没有都是以滚动条的形式显示。