該visibility屬性僅告訴瀏覽器是否顯示元素。它是可見的（visible-您可以看到）或不可見的（hidden-您看不到）。

該display屬性告訴瀏覽器如何繪制和顯示元素（如果有的話）-是否應將其顯示為inline元素（即，它與文本和其他內聯元素一起流動）還是block-level元素（即，具有height和width屬性，你可以設置，它的浮動等），或inline-block（即它的作用就像一個黑匣子，但奠定了直列代替）和其他一些人（list-item，table，table-row，table-cell，flex，等）。

當您將元素設置為，display: block但又將 set設置visibility: hidden為時，瀏覽器仍將其視為塊元素，除非您看不到它。有點像是將一個紅色框堆疊在一個看不見的框之上：該紅色框看起來好像漂浮在空中，而實際上卻位于一個看不見的物理框之上。

換句話說，這意味著display不none存在的元素仍然會影響頁面中元素的流動，無論它們是否可見。圍繞元素的框的display: none行為就像該元素從不存在（盡管它仍保留在DOM中）。

可見性：隱藏；

• 該元素將不會被繪制并且不會接收到單擊/觸摸事件，但是它占用的空間仍然被占用

• 因為它仍然用于布局目的，所以您可以在不可見的情況下對其進行測量

• 更改內容仍會花費時間進行重排/布局頁面

• 可見性是繼承的，因此這意味著您可以通過給子級提供可見性來使其可見。

顯示：無；

• 將使元素不參與流程/布局

• 可以（取決于使用的瀏覽器）殺死Flash電影和iframe（在再次顯示時將重新啟動/重新加載），盡管您可以防止iframe發生這種情況

• 元素不會占用任何空間。出于布局目的，好像它不存在

• 會使某些瀏覽器/設備（如iPad）直接取回該元素使用的內存，如果在動畫過程中在一個值和另一個值之間切換時會引起小的混合

額外說明：

• 隱藏內容中的圖片：在所有流行的瀏覽器中，圖片仍會加載，即使它們位于具有可見性的任何元素中：或顯示：無；

• 隱藏內容中的字體： Webkit瀏覽器（Chrome / Safari）可能會延遲加載僅用于隱藏元素的自定義字體，包括通過可見性或顯示方式。這可能會導致您測量在加載自定義字體之前仍使用后備字體的元素。

顯示：無；將從DOM中刪除DOM元素的視覺樣式/物理空間，而visible：hidden; 不會刪除該元素，而只是將其隱藏。因此，在將div設置為visible時，在DOM中占據300像素垂直空間的div仍將占據300像素垂直寬度。但是設置為display：none; 它的視覺風格被隱藏起來，然后由于缺少更好的單詞而“釋放”了空間。

[編輯]-前一陣子，我寫了上面的文章，無論我是否知識不足或日子不好，我不知道，但現實是，該元素永遠不會從DOM層次結構中刪除。使用display：none時，所有塊級顯示“樣式”都完全“隱藏”，而具有visible：hidden; 元素本身是隱藏的，但仍在DOM中占據可視空間。我希望這可以清除一切