在您開發網頁時，有時可能出於某種原因需要“隱藏”物品的特定區域。 當然，您可以簡單地從HTML標記中刪除問題中的項目，但是如果您希望它們保留在代碼中，但無論出於何種原因都不會顯示在瀏覽器屏幕上（我們將回顧馬上這樣做）。 要在HTML中保留一個元素，但隱藏它以顯示，您可以轉而使用CSS。
隱藏HTML中元素的兩種最常見方法是使用CSS屬性來顯示或顯示。 乍一看，這兩個屬性可能在很大程度上做了同樣的事情，但它們每個都有明顯的區別，您應該知道。 讓我們來看看display：none和visibility：hidden之間的區別。
能見度
使用CSS屬性/值對的可見性：hidden隱藏瀏覽器中的元素。 然而，這個隱藏的元素仍然佔用了佈局空間。 就像你基本上使這個元素不可見一樣，但是它仍然保留在原地，佔據了它獨自留下的空間。
如果您在頁面上放置DIV，並使用CSS將其尺寸設置為100x100像素，則可見性：隱藏屬性將使DIV不顯示在屏幕上，但其後的文本將表現為仍然存在，尊重這一點100x100的間距。
老實說，可見性屬性並不是我們經常使用的東西，當然也不是它自己的。 如果我們還使用其他CSS屬性（如定位）來實現我們想要的某個元素的佈局，那麼我們可以使用可見性來最初隱藏該項目，而只是在懸停時“重啟”它。 這是這個屬性的一個可能用途，但同樣，這不是我們轉向任何頻率的東西。
顯示
與在正常文檔流中留下元素的可見性屬性不同，display：none從文檔中完全刪除元素。 它不佔用任何空間，即使它的HTML仍在源代碼中。 這是因為它確實從文檔流中刪除了。 對於所有意圖和目的，該項目已消失。 這可能是一件好事或一件壞事，取決於你的意圖。 如果你濫用這個屬性，它也可能會損害你的頁面！
測試頁面時，我們經常使用“display：none”。 如果我們需要一個區域“離開”一段時間，以便測試頁面的其他區域，我們可以使用display：none。 但是，要記住的是該元素應該在實際啟動該網站之前返回到頁面。 這是因為在此方法中從文檔流中移除的項目不會被搜索引擎或屏幕閱讀器看到，即使它可能保留在HTML標記中。 過去，這種方法被用作試圖影響搜索引擎排名的黑帽方法，所以沒有顯示的項目可能成為Google的紅旗，用於研究為什麼使用該方法。
我們的一種方法是查找顯示：沒有任何用處，以及我們在實時製作網站上使用它的位置，是我們構建響應式網站時可能具有可用於一種顯示大小但不適用於其他大小的響應式網站 。 您可以使用display：none來隱藏該元素，然後使用媒體查詢將其重新打開。 這是可接受的使用display：none，因為您不想出於惡意原因隱藏任何內容，但有合法的需要。
Jennifer Krynin的原創文章。 由Jeremy Girard於3/3/17編輯