相同點：

visibility和display都能實現元素的顯示和隱藏
display: none; 隱藏元素
display: block; 顯示元素
display: inline; 元素轉換為行內元素
display: inline-block; 元素轉換為行內塊元素

---

visibility:hidden; 隱藏元素
visibility: visible;顯示元素

---

opacity: 0是視覺上消失了，透明度為0，在文檔流中站位，瀏覽器會解析

---

區別：

1.性能比較

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

2.是否占據空間

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

3.動畫效果

transition對于display 是無效的；
transition對于visibility 是無效的；
transition對于opacity 是有效。

4.事件綁定

display:none的元素在頁面已經不存在了，所以在它上面綁定的事件無法觸發；
visibility:hidden 元素雖然占據一定空間，但是在它上面綁定的事件是無法觸發；
opacity: 0元素上面綁定的事件是可以觸發的。

5.子元素繼承

display:none 不會被子元素繼承,給子元素設置display：block;子元素不會顯示；
visibility:hidden 會被子元素繼承，可以通過設置子元素visibility:visible ；可以讓子元素顯示出來；
opacity: 0 也會被子元素繼承，給子元素設置opacity: 1；子元素不會顯示。

效果圖如下（區別特別明顯）：

總結

以上是生活随笔為你收集整理的visibility，display，opacity的区别？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。