简介
在本实验中，我们将探讨在 CSS 中把元素隐藏在屏幕外的概念。这项技术能让我们在视觉和位置上使元素不可见，同时仍能让辅助技术访问它们。完成本实验后，你将扎实理解如何使用此技术来创建更具可访问性且布局友好的网页。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 100%。获得了学习者 100% 的好评率。
屏幕外
虚拟机中已提供了 index.html 和 style.css。
此技术可在 DOM 中完全隐藏一个元素，同时仍使其可访问。要实现这一点，你可以按以下步骤操作：
- 移除所有边框和内边距，并隐藏元素的溢出内容。
- 使用
clip确保元素的任何部分都不显示。 - 将元素的
高度和宽度设置为1px，并使用margin: -1px使其为负。 - 使用
position: absolute防止元素在 DOM 中占用空间。 - 请注意，就可访问性和布局友好性而言，此技术是
display: none（屏幕阅读器无法读取）和visibility: hidden（在 DOM 中占用实际空间）的更好替代方案。
以下是在 HTML 和 CSS 中使用此技术的示例：
<a class="button" href="https://google.com">
Learn More <span class="offscreen">about pants</span>
</a>
.offscreen {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
请点击右下角的“上线”以在端口 8080 上运行网络服务。然后，你可以刷新 Web 8080 标签页来预览网页。
总结
恭喜你！你已完成“屏幕外”实验。你可以在 LabEx 中练习更多实验以提升技能。