区别

  1. display:none; /*元素不显示出来, 并且也不占据位置, 不占据任何空间。*/
visibility:hidden; /*虽然元素不可见, 但是会占据元素应该占据的空间。*/

举例1:

<body>
    第一行
    <div>
      第二行
    </div>
    第三行
</body>

    div{
      display: none;
    }

09.隐藏元素 - 图1

举例2:

<body>
    第一行
    <div>
      第二行
    </div>
    第三行
</body>

div{
   visibility: hidden;
}

09.隐藏元素 - 图2