一、空間占據

display: none; 是徹底消失，不在文檔流中占位，瀏覽器也不會解析該元素

visibility:hidden; 是視覺上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會解析該元素；

使用visibility:hidden比display:none性能上要好，display:none切換顯示時visibility，頁面產生回流（當頁面中的一部分元素需要改變規模尺寸、布局、顯示隱藏等，頁面重新構建，此時就是回流。所有頁面第一次加載時需要產生一次回流），而visibility切換是否顯示時則不會引起回流。

二、子元素繼承

display:none 不會被子元素繼承，但是父元素都不在了，子元素自然也就不會顯示了，皮之不存，毛之安附~~

visibility:hidden 會被子元素繼承，可以通過設置子元素visibility:visible 使子元素顯示出來

opacity: 0 也會被子元素繼承，但是不能通過設置子元素opacity: 0使其重新顯示

三、事件綁定

display:none 的元素都已經不再頁面存在了，因此肯定也無法觸發它上面綁定的事件；

visibility:hidden 元素上綁定的事件也無法觸發；

opacity: 0元素上面綁定的事件是可以觸發的。

四、過渡動畫

transition對於display 肯定是無效的；

transition對於visibility 也是無效的；

transition對於opacity 是有效。

註：要設置一個DOM元素不顯示在瀏覽器可視範圍內：

設置寬高為0，設置透明度為0，設置z-index位置在-100 。

display和visibility之間的區別？