CSS 隐藏属性 -- display:none、visibility:hidden、opacity:0三者的区别

一、空间占据

1. display:none 不会占据额外空间，会产生重排（回流）和重绘
2. visibility:hidden和opacity:0 会占据空间，只会产生重绘
3. visibility:hidden 不会影响列表的计数

<ol>
  <li>元素1</li>
  <li style=" visibility:hidden">元素2</li>
  <li>元素3</li>
</ol>

// 1.元素1
//
// 3.元素3

二、继承方面

1. display:none 不会被子元素继承，元素设置该属性后，自身连同其子元素都会隐藏，即使在子元素上设置 display:block ，子元素也不会显示
2. visibility:hidden 会被子元素继承，可以通过设置子元素的 visibility:visible 属性使子元素重新显示
3. opacity:0 会被子元素继承，不能通过设置子元素的 opacity:1 使其显示

三、事件绑定

1. display:none和visibility:hidden 元素上绑定的事件无法触发
2. opacity:0 元素上绑定的事件可以触发

四、过渡动画

1. transition 对display:none和visibility:hidden无效

<div class="parent">
  <div class="child"></div>
</div>

<style>
  .parent{
    width: 100px;
    height: 100px;
    background-color: sandybrown;
    /* display: none; */
    visibility: hidden;
    transition: all 1s;
  }
  .parent:hover {
    /* display: block; */
    visibility: visible;
  }
  .child {
    width: 50px;
    height: 50px;
    background-color: red;
    /* display: block; */
    /* visibility: visible; */
    opacity: 1;
  }
</style>

2. 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;
    /* display: block; */
    /* visibility: visible; */
    opacity: 1;
  }
</style>