相同點：

visibility和display都能實現(xiàn)元素的顯示和隱藏
display: none; 隱藏元素
display: block; 顯示元素
display: inline; 元素轉(zhuǎn)換為行內(nèi)元素
display: inline-block; 元素轉(zhuǎn)換為行內(nèi)塊元素

---

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

---

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

---

區(qū)別：

1.性能比較

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

2.是否占據(jù)空間

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

3.動畫效果

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

4.事件綁定

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

5.子元素繼承

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

效果圖如下（區(qū)別特別明顯）：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。