display: none;

1、瀏覽器不會生成屬性為display: none;的元素。?
2、display: none;不占據空間（畢竟都不熏染啦），所以動態改變此屬性時會引起重排。?
3、display: none;不會被子類繼承，但是···子類是不會顯示的，畢竟都一起被kill啦。?
4、display,是個尷尬的屬性，transition對她無效。(毫無爭議)

---

visibility: hidden;

1、元素會被隱藏，但是不會消失，依然占據空間。?
2、visibility: hidden會被子類繼承，子類也可以通過顯示的設置visibility: visible;來反隱藏。?
3、visibility: hidden;不會觸發該元素已經綁定的事件。?
4、visibility: hidden;動態修改此屬性會引起重繪。?
5、visibility,transition對她無效。(親測)

---

opacity=0

1、opacity=0只是透明度為100%,元素隱藏，依然占據空間。?
2、opacity=0會被子元素繼承,且，子元素并不能通過opacity=1，進行反隱藏。不能。?
3、opacity=0的元素依然能觸發已經綁定的事件。?
4、opacity,transition對她有效(毫無爭議)

摘自：http://blog.csdn.net/WRian_Ban/article/details/51958195

轉載于:https://www.cnblogs.com/MY0101/p/6406766.html

總結

以上是生活随笔為你收集整理的display: none;、visibility: hidden、opacity=0区别总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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