【CSS】隐藏元素的基本方法｜使用 .d-none
本指南介绍如何使用 display: none; 在 CSS 中轻松隐藏特定的 HTML 元素。它允许你隐藏元素，而不从 HTML 结构中删除它们。
🔹 部分代码
<div class="d-none">
这个元素会被隐藏。
</div>
<style>
.d-none {
display: none;
}
</style>
💻 完整工作代码（只需复制此代码即可在 HTML 中使用）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>隐藏示例</title>
<style>
.d-none {
display: none;
}
</style>
</head>
<body>
<div class="d-none">
这个元素会被隐藏。
</div>
</body>
</html>
🧩 实践应用与用途
display: none; 是最基本的隐藏元素的方法。它常用于动态用户界面，因为可以轻松通过 JavaScript 或 CSS 切换显示与隐藏。
但是，虽然元素被隐藏，它仍然存在于 HTML 中，因此必须小心 SEO 和可访问性，因为屏幕阅读器或其他辅助技术可能会检测到该内容。
在像 Bootstrap 这样的框架中，.d-none 类被标准化，并且还可以使用像 .d-md-none 这样的类进行响应式的显示切换。
🎯 隐藏技术的补充说明
使用 display: none; 可以在不删除元素的情况下隐藏它们。这在通过 JavaScript 进行条件显示或根据用户操作切换时非常有用。
然而，使用此方法时，元素将被视为“不存在”，这意味着被隐藏的表单元素不会获得焦点，也不会影响布局。
与此相对，visibility: hidden; 仅隐藏元素，但仍保留其占用的空间。当需要完全隐藏元素时使用 display: none;，而当只想隐藏内容但保留布局时，使用 visibility: hidden;。
如果你只想在移动设备上隐藏元素，可以使用媒体查询，例如 @media (max-width: 768px) { .d-none-mobile { display: none; } }。这样可以根据屏幕大小或其他条件灵活地隐藏元素。
已复制！