visibility，display，opacity的区别？
相同點：
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的区别？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Social Distancing
- 下一篇： 高速公路收费该取消