CSS—隐藏元素：1分钟掌握与使用隐藏元素的方法

本文链接：https://blog.youkuaiyun.com/qq_27634797/article/details/145950964

个人博客：haichenyi.com。感谢关注

1. 目录

1–目录
2–display:none
3–visibility: hidden
4–opacity: 0
5–position: absolute;与 left: -9999px;
6–z-index 和 position
7–clip-path: circle(0%)

2. display:none

标签会挂载在html中，但是不会在页面上显示，也不会占用页面的空间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS隐藏元素的方法</title>
    <style>
        .displayNone {
            display: none;
        }
    </style>
</head>

<body>
    <div>哈哈哈哈</div>
    <div class="displayNone">displayNone</div>
    <div>哈哈哈哈</div>
</body>

</html>

displayNone的效果图
下面是没有display:none的效果图
没有displayNone的效果图

3. visibility: hidden

标签会挂载在html中，但是不会在页面上显示，会占用页面的空间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS隐藏元素的方法</title>
    <style>
        .visibilityHidden {
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div>哈哈哈哈</div>
    <div class="visibilityHidden">visibilityHidden</div>
    <div>哈哈哈哈</div>
</body>

</html>

visibilityHidden的效果图

4. opacity: 0

把标签的透明度设置为0，也就是全透明，用户看不到，标签也就隐藏了。标签会挂载在html中，但是不会在页面上显示，会占用页面的空间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS隐藏元素的方法</title>
    <style>
        .opacity100 {
            opacity: 1;
        }

        .opacity50 {
            opacity: 0.5;
        }

        .opacity20 {
            opacity: 0.2;
        }

        .opacity0 {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div>哈哈哈哈</div>
    <div class="opacity100">opacity100</div>
    <div class="opacity50">opacity50</div>
    <div class="opacity20">opacity20</div>
    <div class="opacity0">opacity0</div>
    <div>哈哈哈哈</div>
</body>

</html>

opacity0的效果图

5. position: absolute;与 left: -9999px

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS隐藏元素的方法</title>
    <style>
        .parent {
            position: relative;

            .absoluteLeft0 {
                position: absolute;
                left: 0px;
                top: 0px;
            }

            .absoluteLeft50 {
                position: absolute;
                left: -50px;
                top: 50px;
            }
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="absoluteLeft0">absoluteLeft0</div>
        <div class="absoluteLeft50">absoluteLeft50</div>
        <div>哈哈哈哈</div>
    </div>
</body>

</html>

left效果图

6. z-index 和 position

z-index表示当前元素的层级。这么理解这个层级呢？比方说，你家房子，地上一层，地下一层地下室。地下室就是-1层。对应这里的z-index:-1;你站在地上，看不见地下室。

再说回到元素的层级的问题。你的html文档可见范围就是地上1层。你把元素放到地下室了，自然就看不到了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS隐藏元素的方法</title>
    <style>
        .parent {
            position: relative;

            .zIndex {
                position: absolute;
                z-index: -1;
            }

            .absolute0 {
                position: absolute;
                z-index: 1;
                background-color: white;
            }
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="zIndex">z-index为-1</div>
        <div class="absolute0">哈哈哈哈</div>
    </div>
</body>

</html>

z-index的效果图

7. clip-path: circle(0%)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS隐藏元素的方法</title>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background-color: red;

        }

        .div3 {
            width: 20px;
            height: 20px;
            margin: auto;
            background-color: black;
        }

        .div4 {
            width: 20px;
            height: 20px;
            margin: auto;
            background-color: black;
            clip-path: circle(50%);
        }

        .div5 {
            width: 20px;
            height: 20px;
            margin: auto;
            background-color: black;
            clip-path: circle(25%);
        }

        .div6 {
            width: 20px;
            height: 20px;
            margin: auto;
            background-color: black;
            clip-path: circle(0%);
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2">
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
        <div class="div6"></div>
        <div>哈哈哈哈</div>
    </div>
</body>

</html>

裁剪效果图
PS:整篇文章，精炼一下，如下

方式	是否占位
display:none	不占位
visibility: hidden	占位
opacity: 0	占位
position: absolute; left: -9999px	占位(不在可视范围内)
z-index 和 position	占位(会被其他元素遮挡)
clip-path: circle(0%)	占位

为啥写的时候会写一句是否会挂载到dom树上，因为，我们使用vue中的v-if，v-show的时候，使用v-if时，元素压根就不会挂载到dom树上，v-show会挂载到dom树上(display:none)，可能刷新页面的时候会存在bug，需要重新渲染，需要使用v-if。这都是后话了。项目中用的时候就知道了。