相同點

display：none和visibility：hidden都能把網頁上的某元素隱藏起來

不同點

display:none

　　不為被隱藏的物件保留其物理空間，即該物件在頁面上徹底消失。隱藏產生迴流和重繪（reflow 和 repaint），我們來看一下具體效果：

<div>
    <strong>給元素設定display：none樣式</strong>
    <p>A元素</p>
    <p style="display: none">B元素</p>
    <p>C元素</p>
</div>

值得注意的是：display:none 就是“株連性”明顯的宣告：一旦父節點元素應用了display:none，父節點及其子孫節點元素全部不可見，而且無論其子孫元素如何不屈地掙扎都無濟於事。

visibility:hidden

　　使物件在頁面上不可見，但頁面上的空間還在。隱藏元素仍需佔用與未隱藏時一樣的空間，也就是說雖然元素不可見了，但是仍然會影響頁面佈局。只產生重繪，我們來看一下具體效果：

<div>
    <strong>給元素設定visibility：hidden</strong>
    <p>A元素</p>
    <p style="visibility: hidden">B元素</p>
    <p>C元素</p>
</div>

還有一點要注意：visibility具有繼承性，給父元素設定visibility:hidden;子元素也會繼承這個屬性。但是如果重新給子元素設定visibility: visible,則子元素又會顯示出來。這個和display: none有著質的區別