显示：无与可见度：隐藏的区别是什么？

显示：无与可见度：隐藏的区别是什么？

display: none且visibility: hidden CSS属性通常用于控制网页上元素的可见性，但它们在布局和渲染方面的行为不同。

• 显示：无：设置元素display: none ，将其完全从布局中删除。这意味着该元素不会占用页面上的任何空间，也没有完全渲染。该元素的任何子女也不会渲染，也不会影响布局。元素本来可以占据的空间已关闭，其他元素会移动以填补空白。
• 可见性：隐藏：当元素设置为visibility: hidden ，用户看不到它，但仍然会影响页面的布局。元素通常占据的空间仍然存在，好像该元素仍然存在，但看不见。该元素的孩子也可以将其设置为visibility: visible ，尽管他们的父母被隐藏了，但可以显示他们。

总而言之， display: none完全从布局中删除元素，而visibility: hidden屏蔽了元素，但将其空间保留在布局中。

显示的使用如何：没有任何影响网页的布局？

当您使用display: none ，它会以以下方式显着影响网页的布局：

• 删除空间：该元素不会占据页面上的任何空间。布局调整了好像元素从未存在。这意味着其他元素可能会向上，向下或向侧面移动，以填充隐藏元素本来可以占据的空间。
• 反流：删除元素可以触发页面布局的反映。反流是浏览器重新计算页面上元素的位置和尺寸的过程。这可能是一个密集的操作，尤其是如果更改影响页面的大部分时间。
• 父和兄弟姐妹元素：带有display: none无需缩小或扩展，具体取决于其余内容。同级元素将根据缺乏隐藏元素来调整其位置。
• 儿童元素：要display: none没有任何方式也不会以任何方式影响布局。

使用display: none 。

使用可见性的性能含义是什么：隐藏与显示：无？

使用visibility: hidden与display: none可以分解为几个关键领域：

• 渲染性能：使用visibility: hidden通常更快，因为浏览器仍然呈现元素及其子女，但只是将它们隐藏起来。这避免了触发布局的回流，这在计算上可能很昂贵。另一方面， display: none导致元素从渲染树中删除，这可能会导致页面布局的回流，可能会影响性能，尤其是当隐藏元素很大或布局是否复杂时。
• 内存用法：设置为visibility: hidden在DOM中并消耗内存，因为它们仍然是渲染树的一部分。相比之下，带有display: none不占用资源，而是在DOM中，可以节省一些内存与visibility: hidden 。
• JavaScript和事件处理：具有visibility: hidden元素仍然可以接收事件并被JavaScript操纵，而带有display: none 。这可能会影响许多仍在与许多隐藏元素进行交互或操纵的应用程序中的性能。
• 可访问性：具有visibility: hidden （如果不是明确设置），这可能会影响语音导航和其他辅助技术的情况。

总体而言， visibility: hidden对绩效的征税往往更少，但是display: none可以更有效。

可见性：隐藏的元素仍然可以访问屏幕阅读器吗？

是的， visibility: hidden元素通常可以保持屏幕读取器的访问，前提是该元素仍然是文档标签顺序的一部分，或者尚未明确排除在可访问性树中。这是因为该元素仍然存在于DOM中，并且是渲染树的一部分，尽管在视觉上隐藏了。

但是，有一些考虑因素要牢记：

• 选项卡顺序：如果具有visibility: hidden焦点（例如，表单元素），则屏幕读取器仍然可以访问它，如果它是选项卡顺序的一部分。
• ARIA属性：您可以使用ARIA（可访问的丰富的Internet应用程序）属性来控制元素是否暴露于辅助技术。例如， aria-hidden="true"可以与visibility: hidden以确保元素也隐藏在屏幕读取器中。
• CSS和JavaScript ：如果您使用CSS来设置visibility: hidden ，并且该元素仍然是DOM的一部分，而JavaScript不会操纵以将其从选项卡顺序中删除或设置aria-hidden ，则可能可以访问屏幕阅读器。

与屏幕读取器一起测试您的Web应用程序很重要，以确保隐藏的元素在可访问性方面的表现。

以上是显示：无与可见度：隐藏的区别是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！