个人博客：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>
下面是没有display:none的效果图
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>
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>
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>
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>
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。这都是后话了。项目中用的时候就知道了。
