區(qū)別有三點：

1.空間占據(jù)。這兩個聲明都可以讓元素隱藏，不同之處在于display:none隱藏后元素不占據(jù)任何空間，而visibility:hidden隱藏后元素空間依舊存在。

2.回流與渲染。display:none 產(chǎn)生reflow和repaint(回流與重繪)，而visibility:hidden 沒有這個影響前端性能的問題。

（注：reflow，就是由于某些原因（如用戶改變?yōu)g覽器窗口的大小，使用一些JavaScript方法，包括計算樣式，對DOM進行元素的添加或刪除，或是改變元素的class等。），要將元素回過頭來重新“流”一遍。）

3.株連性。所謂“株連性”，就是如果祖先元素遭遇某禍害，則其子子孫孫無一例外也要遭殃。display:none就是“株連性”明顯的聲明：一旦父節(jié)點元素應(yīng)用了display:none，父節(jié)點及其子孫節(jié)點元素全部不可見，而且無論其子孫元素如何不屈地掙扎都無濟于事。

通常情況下，我們給一個父元素應(yīng)用visibility:hidden，則其子孫后代也都會全部不可見。而實際上卻存在隱藏“失效”的情況。何時隱藏“失效”？很簡單，如果子孫元素應(yīng)用了visibility:visible，那么這個子孫元素又會顯現(xiàn)出來。