「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」
CSS 元素的显示和隐藏
HTML元素显示和隐藏的方法有很多，不同的方法有不同的效果，适用于不同的场景。这篇文章主要是做个总结。
一、元素隐藏方法总结
- 如果希望元素不可见、不能点击、不占据空间、资源会加载、DOM 可访问：
display: none - 如果希望元素不可见、不能点击、会占据空间、资源会加载，DOM 可访问：
visibility: hidden - 如果希望元素不可见、可以点击、会占据空间、DOM 可访问：
opacity: 0 - 如果希望元素不可见、可以点击、不占据空间、DOM 可访问：
opacity: 0; position: abolute; - 如果希望元素不可见、不能点击、会占据空间、DOM 可访问：
position: relative; z-index: -1; - 如果希望元素不可见、不能点击、不占据空间、DOM 可访问：
position: absolute; z-index: -1;
还有一些比较新的方法
- CSS transform: scale变换
figure {
transform: scale(0);
}
- HTML5 hidden attribute
hidden属性的效果和display:none;相同
<figure id="oymyakon" hidden>
- Zero height and hidden overflow
figure {
height: 0;
overflow: hidden;
}
- Blur Filter
figure{
filter: blur(100px);
}
二、display: none 与 visibility: hidden 的区别
display: none的元素不占据任何空间，visibility: hidden的元素空间保留。display: none会影响css3的transition过渡效果，visibility: hidden不会。display: none隐藏产生重绘 ( repaint ) 和回流 ( relfow )，visibility: hidden只会触发重绘。- 株连性：
display: none的节点和子孙节点元素全都不可见，
visibility: hidden的节点的子孙节点元素可以设置visibility: visible显示。
visibility: hidden属性值具有继承性，所以子孙元素默认继承了hidden而隐藏，但是当子孙元素重置为visibility: visible就不会被隐藏。
三、v-if 和 v-show 的区别
-
v-if是通过控制DOM节点的存在与否来控制元素的显隐；
v-show是通过设置DOM元素的display样式，block为显示，none为隐藏； -
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-show只是简单的基于css切换； -
v-if有更高的切换消耗；v-show有更高的初始渲染消耗。
建议阅读Vue官方文档的解释 v-if vs v-show
四、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
width: auto;
padding: 0 30px;
display: flex;
}
.article {
padding: 15px 20px;
}
figure {
margin: 0;
padding: 15px 20px;
}
.display-none {
display: none;
}
.visibility-hidden {
visibility: hidden
}
.opacity-0 {
opacity: 0
}
.opacity-0_and_position-absolute {
opacity: 0;
position: absolute;
}
.position-relative_and_z-index--1 {
position: relative;
z-index: -1;
}
.position-absolute_and_z-index--1 {
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<div class="wrap">
<div class="article">
<article>刻晴是游戏《原神》中的5星雷系角色，璃月七星之一，玉衡星。对“帝君一言而决的璃月”颇有微词，但实际上，神挺欣赏她这样的人。
刻晴坚信与人类命运相关的事，应当由人类去做，而且人类一定可以做得更好。为了证明这一点，她比任何人都要努力。
</article>
<h1>display: none</h1>
</div>
<figure class="display-none">
<img src="https://img0.baidu.com/it/u=4099495319,1705263726&fm=26&fmt=auto" alt>
<figcaption>刻晴是游戏《原神》中的5星雷系角色，璃月七星之一，玉衡星</figcaption>
</figure>
</div>
<hr>
<div class="wrap">
<div class="article">
<article>刻晴是游戏《原神》中的5星雷系角色，璃月七星之一，玉衡星。对“帝君一言而决的璃月”颇有微词，但实际上，神挺欣赏她这样的人。
刻晴坚信与人类命运相关的事，应当由人类去做，而且人类一定可以做得更好。为了证明这一点，她比任何人都要努力。
</article>
<h1>visibility: hidden</h1>
</div>
<figure class="visibility-hidden">
<img src="https://img0.baidu.com/it/u=4099495319,1705263726&fm=26&fmt=auto" alt>
<figcaption>刻晴是游戏《原神》中的5星雷系角色，璃月七星之一，玉衡星</figcaption>
</figure>
</div>
<hr>
<div class="wrap">
<div class="article">
<article>刻晴是游戏《原神》中的5星雷系角色，璃月七星之一，玉衡星。对“帝君一言而决的璃月”颇有微词，但实际上，神挺欣赏她这样的人。
刻晴坚信与人类命运相关的事，应当由人类去做，而且人类一定可以做得更好。为了证明这一点，她比任何人都要努力。
</article>
<h1>opacity: 0</h1>
</div>
<figure class="opacity-0">
<img src="https://img0.baidu.com/it/u=4099495319,1705263726&fm=26&fmt=auto" alt>
<figcaption>刻晴是游戏《原神》中的5星雷系角色，璃月七星之一，玉衡星</figcaption>
</figure>
</div>
<hr>
<div class="wrap">
<div class="article">
<article>刻晴是游戏《原神》中的5星雷系角色，璃月七星之一，玉衡星。对“帝君一言而决的璃月”颇有微词，但实际上，神挺欣赏她这样的人。
刻晴坚信与人类命运相关的事，应当由人类去做，而且人类一定可以做得更好。为了证明这一点，她比任何人都要努力。
</article>
<h1>opacity: 0;</h1>
<h1>position: absolute;</h1>
</div>
<figure class="opacity-0_and_position-absolute">
<img src="https://img0.baidu.com/it/u=4099495319,1705263726&fm=26&fmt=auto" alt>
<figcaption>刻晴是游戏《原神》中的5星雷系角色，璃月七星之一，玉衡星</figcaption>
</figure>
</div>
<hr>
<div class="wrap">
<div class="article">
<article>刻晴是游戏《原神》中的5星雷系角色，璃月七星之一，玉衡星。对“帝君一言而决的璃月”颇有微词，但实际上，神挺欣赏她这样的人。
刻晴坚信与人类命运相关的事，应当由人类去做，而且人类一定可以做得更好。为了证明这一点，她比任何人都要努力。
</article>
<h1>position: relative;</h1>
<h1>z-index: -1;</h1>
</div>
<figure class="position-relative_and_z-index--1">
<img src="https://img0.baidu.com/it/u=4099495319,1705263726&fm=26&fmt=auto" alt>
<figcaption>刻晴是游戏《原神》中的5星雷系角色，璃月七星之一，玉衡星</figcaption>
</figure>
</div>
<hr>
<div class="wrap">
<div class="article">
<article>刻晴是游戏《原神》中的5星雷系角色，璃月七星之一，玉衡星。对“帝君一言而决的璃月”颇有微词，但实际上，神挺欣赏她这样的人。
刻晴坚信与人类命运相关的事，应当由人类去做，而且人类一定可以做得更好。为了证明这一点，她比任何人都要努力。
</article>
<h1>position: absolute;</h1>
<h1>z-index: -1;</h1>
</div>
<figure class="position-absolute_and_z-index--1">
<img src="https://img0.baidu.com/it/u=4099495319,1705263726&fm=26&fmt=auto" alt>
<figcaption>刻晴是游戏《原神》中的5星雷系角色，璃月七星之一，玉衡星</figcaption>
</figure>
</div>
<hr>
</body>
</html>
