visibility的常见用法（小白专用）

最新推荐文章于 2025-04-02 09:31:39 发布

Ys@_yxl

最新推荐文章于 2025-04-02 09:31:39 发布

阅读量7.8k

点赞数 13

文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_45817492/article/details/109890752

版权

1. visibility（可见性）

visibility可见性，用于显示隐藏元素，但是保留原来的位置。

inherit	继承
visible	可见的（默认的）
hidden	隐藏元素后，占用原来的位置

visibility（可见性）的常见用法：

1. visible可见的（默认的）使用方法简介

由于默认属性值是显示。所以三个小盒子都显示。

<!DOCTYPE html>
<html lang="en">
<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 class="one">

    </div>
    <div class="two">

    </div>
    <div class="three">

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

在这里插入图片描述
2.当我们给第一个小盒子设置成不显示（visibility: hidden;）时，第二个小盒子依旧占有原来的位置。

<!DOCTYPE html>
<html lang="en">
<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 class="one">

    </div>
    <div class="two">

    </div>
    <div class="three">

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

在这里插入图片描述
注意：visibility隐藏元素后，继续占有原来位置。

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

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

2.visibility（可见性）的inherit属性值用法

<!DOCTYPE html>
<html lang="en">
<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 class="one">
        <div class="four"></div>
    </div>
    <div class="two">
        <div class="five">

        </div>
    </div>
    <div class="three">

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

在这里插入图片描述

当使用inherit属性值时。
1.由于给第一个绿色大盒子设置了不显示，所以，第一个盒子里的蓝色小盒子继承了大盒子hidden属性，也不显示。
2.第二个蓝色小盒子继承了粉色的大盒子的显示默认属性visible，所以显示。

<!DOCTYPE html>
<html lang="en">
<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 class="one">
        <div class="four"></div>
    </div>
    <div class="two">
        <div class="five">

        </div>
    </div>
    <div class="three">

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

在这里插入图片描述