CSS元素可見性（visibility）

89834 閱讀 0 評論 0 點贊

CSS 中的 visibility 屬性用來設(shè)置元素是否可見，您可以將該屬性與 JavaScript 一起使用，來創(chuàng)建非常復(fù)雜的菜單或網(wǎng)頁布局，比如在網(wǎng)頁中做一些測試題時您可以使用 visibility 屬性將題目的答案或解析隱藏起來，需要時再將其展示出來。

visibility 屬性的可選值如下：

值	描述
visible	元素是可見顯示的，是默認的屬性值
hidden	隱藏元素，元素是不可見不顯示的，但是元素還會占據(jù)原有的空間
collapse	主要用來隱藏表格的行和列，隱藏的行或列所占的空間可以被其他表格內(nèi)容使用；如果在其他元素上使用，其效果等同于“hidden”
inherit	元素會繼承父元素的visibility屬性值，就是父元素的visibility屬性值是什么，該元素的visibility屬性值就是什么。從父元素繼承 visibility 屬性的值

舉例說明：

1. visible

可見的（默認的）使用方法

由于默認屬性值是顯示。所以三個小盒子都顯示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div{
           width: 100px;
           height: 100px;
            }
            .one{
                background-color: palegreen;
            }
            .two{
                background-color: palevioletred;
            }
            .three{
                background-color: papayawhip;
            }
    </style>
</head>
<body>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
</body>
</html>

運行結(jié)果：

visible可見的

2. hidden

當我們給第一個小盒子設(shè)置成不顯示（visibility: hidden;）時，第二個小盒子依舊占有原來的位置。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div{
           width: 100px;
           height: 100px;
            }
            .one{
                background-color: palegreen;
                visibility: hidden;
            }
            .two{
                background-color: palevioletred;
            }
            .three{
                background-color: papayawhip;
            }
    </style>
</head>
<body>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
</body>
</html>

運行結(jié)果：

visibility: hidden

注意：visibility隱藏元素后，繼續(xù)占有原來位置。

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

如果隱藏元素不想要原來位置，就用display：none

3. inherit

舉例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .one,.two,.three{
           width: 100px;
           height: 100px;
            }
            .one{
                background-color: palegreen;
            }
            .two{
                background-color: palevioletred;
            }
            .three{
                background-color: papayawhip;
            }
            .four,
            .five{
                width: 50px;
                height: 50px;
                background-color: powderblue;
            }
    </style>
</head>
<body>
    <div>
        <div></div>
    </div>
    <div>
        <div>

        </div>
    </div>
    <div>

    </div>
</body>
</html>

運行結(jié)果：

inherit

當使用inherit屬性值時。

（1）由于給第一個綠色大盒子設(shè)置了不顯示，所以，第一個盒子里的藍色小盒子繼承了大盒子hidden屬性，也不顯示。

（2）第二個藍色小盒子繼承了粉色的大盒子的顯示默認屬性visible，所以顯示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .one,.two,.three{
           width: 100px;
           height: 100px;
            }
            .one{
                background-color: palegreen;
                visibility: hidden;
            }
            .two{
                background-color: palevioletred;
            }
            .three{
                background-color: papayawhip;
            }
            .four,
            .five{
                width: 50px;
                height: 50px;
                background-color: powderblue;
            }
    </style>
</head>
<body>
    <div>
        <div></div>
    </div>
    <div>
        <div>

        </div>
    </div>
    <div>

    </div>
</body>
</html>

運行結(jié)果：

visible