display:none;、visibility: hidden;、opacity: 0;三个属性都可以将元素进行隐藏，它们之间有什么区别呢？
- 是否占据空间
使用display:none;隐藏后，元素不再占位置，使用visibility: hidden;、opacity: 0;隐藏后，元素仍然占位置。
<!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>
.container {
border: 1px solid red;
}
.container > div {
display: inline-block;
}
.box1, .box2 {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<p>没有设置隐藏前的样子</p>
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container">
<p>display:none</p>
<div class="box1" style="display:none;">
</div>
<div class="box2"></div>
</div>
<div class="container">
<p>visibility:hidden</p>
<div class="box1" style="visibility: hidden;"></div>
<div class="box2"></div>
</div>
<div class="container">
<p>opacity:0</p>
<div class="box1" style="opacity: 0;"></div>
<div class="box2"></div>
</div>
</body>
</html>
2. 子元素是否继承
<!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>
.container {
border: 1px solid red;
}
.container > div {
display: inline-block;
}
.box1, .box2 {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<p>没有设置隐藏前的样子</p>
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container">
<p>display:none</p>
<div class="box1" style="display:none;">
<span style="display: inline-block;">子元素</span>
</div>
<div class="box2"></div>
</div>
<div class="container">
<p>visibility:hidden</p>
<div class="box1" style="visibility: hidden;">
<span style="visibility: visible;">子元素</span>
</div>
<div class="box2"></div>
</div>
<div class="container">
<p>opacity:0</p>
<div class="box1" style="opacity: 0;">
<span style="opacity: 1;">子元素</span>
</div>
<div class="box2"></div>
</div>
</body>
</html>
3. 事件绑定
设置 display:none; 的元素无法无法触发它上面绑定的事件。设置 visibility: hidden; 的元素也无法触发它上面绑定的事件，设置 opacity: 0; 的元素可以触发它上面绑定的事件。
<!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>
.container {
border: 1px solid red;
}
.container > div {
display: inline-block;
}
.box1, .box2 {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<p>没有设置隐藏前的样子</p>
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container">
<p>display:none</p>
<div class="box1" style="display:none;" onclick="clicked('设置display:none的元素被点击了')"></div>
<div class="box2"></div>
</div>
<div class="container">
<p>visibility:hidden</p>
<div class="box1" style="visibility: hidden;" onclick="clicked('设置visibility:hidden的元素被点击了')"></div>
<div class="box2"></div>
</div>
<div class="container">
<p>opacity:0</p>
<div class="box1" style="opacity: 0;" onclick="clicked('设置opactiy:0的元素被点击了')"></div>
<div class="box2"></div>
</div>
<script>
function clicked(msg) {
console.log(msg)
}
</script>
</body>
</html>
- 过渡动画