CSS：元素的顯示與隱藏（display、visibility、overflow）

時間 2020-06-25

標籤 css 元素顯示隱藏 display visibility overflow 欄目 CSS 简体版

原文原文鏈接

一、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無論超出了沒有都是以滾動條的形式顯示。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。