一、空间占据
- display:none 不会占据额外空间,会产生重排(回流)和重绘
- visibility:hidden和opacity:0 会占据空间,只会产生重绘
- visibility:hidden 不会影响列表的计数
<ol>
<li>元素1</li>
<li style=" visibility:hidden">元素2</li>
<li>元素3</li>
</ol>
二、继承方面
- display:none 不会被子元素继承,元素设置该属性后,自身连同其子元素都会隐藏,即使在子元素上设置 display:block ,子元素也不会显示
- visibility:hidden 会被子元素继承,可以通过设置子元素的 visibility:visible 属性使子元素重新显示
- opacity:0 会被子元素继承,不能通过设置子元素的 opacity:1 使其显示
三、事件绑定
- display:none和visibility:hidden 元素上绑定的事件无法触发
- opacity:0 元素上绑定的事件可以触发
四、过渡动画
- transition 对display:none和visibility:hidden无效
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent{
width: 100px;
height: 100px;
background-color: sandybrown;
visibility: hidden;
transition: all 1s;
}
.parent:hover {
visibility: visible;
}
.child {
width: 50px;
height: 50px;
background-color: red;
opacity: 1;
}
</style>
- transition 对opacity:0有效
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent{
width: 100px;
height: 100px;
background-color: sandybrown;
opacity: 0;
transition: all 1s;
}
.parent:hover {
opacity: 1;
}
.child {
width: 50px;
height: 50px;
background-color: red;
opacity: 1;
}
</style>