几中隐藏 Web 中的元素方法及优缺点

么，你可能会问为什么不使用display: none呢?这是个好问题。当通过其hidden属性调用图像选择器时，我们可以确定即使CSS因为某种原因没有加载，元素也会被隐藏。

1. 可访问性对hidden的影响

从可访问性的角度来看，hidden将元素完全隐藏在web页面之外，因此屏幕阅读器无法访问它。一定要避免使用它来隐藏仅用于表示目的的元素。

二、CSS display 属性

每个元素都有一个默认的display值，比如inline-block、block、table等等。要隐藏具有display属性的元素，我们应该使用display: none。当一个元素使用display: none隐藏时，它的所有后代都将被删除。

考虑下面的例子：

 

. 如果资源隐藏在CSS中，它们会加载吗?

是的，会的。例如，如果被CSS隐藏，并且我们在某个断点处显示它，则它已经被加载。即使图片被CSS隐藏，该图片也会引起HTTP请求。

在下面的演示中，我只添加了一个图像，并使用CSS隐藏它。然后，我打开「DevTools」并检查networks选项卡，它显示图像已加载。

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!