本文转载自微信公众号“大千世界”，转载请联系大千世界公众号。在Web开发中，出于多种原因，我们需要隐藏元素。例如，一个按钮应该在移动设备上可见但在桌面视口中隐藏。或者，在移动设备上隐藏但在桌面上显示的导航元素。元素隐藏时有三种不同的状态：元素完全隐藏并从文档流中移除。元素仅在视觉上隐藏，仍然可以通过屏幕阅读器等辅助技术(AT)访问。元素是可见的，但仅对屏幕阅读器隐藏。在这篇文章中，我们将学习如何在html和css中隐藏元素，并涵盖可访问性、动画和隐藏用例等方面，让我们开始吧。1.HTML5HiddenAttribute它是一个BooleanHTML属性，隐藏附加在它上面的元素。当浏览器加载网页时，它不会渲染具有隐藏属性的元素，除非它被CSS手动覆盖，这类似于应用display:none的效果。考虑以下示例：我们有一个标题、一个图形和一个描述。仅当视口宽度大于400像素时才会显示图表。我向元素添加了hidden`属性。在CSS中，我使用hidden属性仅以所需的视口大小显示元素。img[hidden]{display:none;}@media(min-width:400px){img[hidden]{display:block;}}示例源代码：https://codepen.io/shadeed/pen/373c8a132e5d72201b935689d6990d16?editors=1100所以，你可能会问为什么不使用display:none？这是个好问题。当通过其隐藏属性调用图像选择器时，我们可以确定该元素将被隐藏，即使CSS由于某种原因没有加载也是如此。1.无障碍对hidden的影响从无障碍的角度来说，hidden是将元素从网页中完全隐藏起来，因此无法被屏幕阅读器访问。请务必避免仅出于展示目的使用它来隐藏元素。二、CSS显示属性每个元素都有一个默认的显示值，比如inline-block、block、table等等。要隐藏具有display属性的元素，我们应该使用display:none。当使用display:none隐藏一个元素时，它的所有后代都将被删除。考虑以下示例：img{display:none;}@media(min-width:400px){img{display:block;}}这将从文档流和屏幕阅读器中完全隐藏图像。也许您想知道什么是文档流？见下图：注意，当蓝皮书被隐藏时，它会完全从堆栈中移除。为它预留的空间不见了。当在HTML中隐藏元素时，同样的概念也适用。元素的空间消失了，它改变了文档流，或者在我们的例子中，改变了书流堆栈。下面是一个动画，展示了当书被移走时会发生什么：1.如果资源隐藏在CSS中，它们会被加载吗？是他们会。例如，如果它被CSS隐藏，而我们在某个断点处显示它，则它已经加载。即使图像被CSS隐藏，图像也会引起HTTP请求。在下面的演示中，我只是添加了一个图像并用CSS隐藏它。然后，我打开“DevTools”并检查网络选项卡，它显示图像已加载。稍后我们将讨论这一点，以解释在特定断点或视口大小时不需要时如何减少HTTP请求。2.style元素值得一提的是，有些元素的默认值为display:none。可以将
