在您开发网页时，有时可能出于某种原因需要“隐藏”物品的特定区域。 当然，您可以简单地从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编辑