CSS:元素的显示与隐藏(display、visibility、overflow)

1、display显示与隐藏

(1)display的属性值

none:隐藏元素

block:转换为块级元素、显示元素

(2)隐藏

不添加隐藏盒子的属性

<!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>

CSS:元素的显示与隐藏(display、visibility、overflow)

添加属性隐藏第一个黄色的盒子:

<!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>

CSS:元素的显示与隐藏(display、visibility、overflow)

 

 隐藏元素后,不再占有原来的位置

(3)显示

将属性的值改为block即可:

<!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>

CSS:元素的显示与隐藏(display、visibility、overflow)

 

2、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>

CSS:元素的显示与隐藏(display、visibility、overflow)

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

 

3、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>

CSS:元素的显示与隐藏(display、visibility、overflow)

 

 (2)不显示,默认是显示的:

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

CSS:元素的显示与隐藏(display、visibility、overflow)

 

多出来的文字是隐藏的。 

(3)显示:

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

CSS:元素的显示与隐藏(display、visibility、overflow)

 

 (4)滚动条:

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

CSS:元素的显示与隐藏(display、visibility、overflow)

 

 以滚动条的形式来查看所有的内容

(5)滚动条auto:

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

CSS:元素的显示与隐藏(display、visibility、overflow)

 

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

 

上一篇:html的z-index


下一篇:前端控件元素垂直居中对齐的方法