display：none 和visiablility：hidden 的區別

display:none和visible:hidden都能把網頁上某個元素隱藏起來，但二者有區別:

區別一：

display:none ---不爲被隱藏的對象保留其物理空間，即該對象在頁面上完全消失，通俗來講就是看不見也摸不到。visible:hidden--- 使對象在網頁上不可見，但該對象在網頁上所佔的物理空間沒有改變，通俗來講就是看不見但摸獲得。 如：

<p><span style="display: none;">世界在向我招手</span>你好嗎</p>

它展示出來的效果是

此時前面內容區域的位置沒有了，後面的內容就自動的往前填充 而若是設置爲visible:hidden時

<p><span style="visibility:hidden">世界在向我招手</span>你好嗎</p>

能夠發現第二張圖片中中它留出了"世界在向我招手」內容區域，後面的內容仍是在原來的位置上

正常狀況下是這樣子的

區別二

display:none隱藏產生reflow和repaint(迴流與重繪)，而visibility:hidden沒有這個影響前端性能的問題；

什麼是迴流和重繪？

迴流：當render tree中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就稱爲迴流(reflow)。 重繪：當render tree中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，好比background-color。則就叫稱爲重繪。

區別三

株連性方面的差別;所謂「株連性」，就是若是祖先元素遭遇某禍害，則其子子孫孫無一例外也要遭殃； display:none就是「株連性」明顯的聲明：一旦父節點元素應用了display:none，父節點及其子孫節點元素所有不可見，並且不管其子孫元素如何不屈地掙扎都無濟於事。 而對於visibility來講，若是父元素應用visibility:hidden，則其子孫後代也都會所有不可見。但能夠經過 應用visibility:visible而顯現出來；