display: none;

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

---

visibility: hidden;

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

---

opacity=0

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/MY0101/p/6406766.html

總結(jié)

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

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