display和opacity以及visibility

 

1.display:none是完全消失，不在文檔流中佔位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，能夠理解爲透明度爲0的效果，在文檔流中佔位，瀏覽器會解析該元素；

2.使用visibility:hidden比display:none性能上要好，display:none切換顯示時visibility，頁面產生迴流（當頁面中的一部分元素須要改變規模尺寸、佈局、顯示隱藏等，頁面從新構建，此時就是迴流。全部頁面第一次加載時須要產生一次迴流），而visibility切換是否顯示時則不會引發迴流。

3.opacity: 0 是透明度爲0

具體來講應該是： 

1 opacity=0，該元素隱藏起來了，但不會改變頁面佈局，而且，若是該元素已經綁定一些事件，如click事件，那麼點擊該區域，也能觸發點擊事件的
2 visibility=hidden，該元素隱藏起來了，但不會改變頁面佈局，可是不會觸發該元素已經綁定的事件
3 display=none，把元素隱藏起來，而且會改變頁面佈局，能夠理解成在頁面中把該元素刪除掉同樣