🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【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; 是隐藏元素的最基本方法。它通常用于动态UI，因为它可以通过JavaScript或CSS轻松切换。

然而，即使隐藏，元素依然存在于HTML中，因此在SEO和可访问性方面需要谨慎。屏幕阅读器或辅助技术可能仍会检测到该内容。

在像Bootstrap这样的框架中，.d-none 被标准化，并且可以通过类似 .d-md-none 的类进行响应式切换。

🎯 关于隐藏技巧的补充说明

使用 display: none; 可以让你在不删除HTML结构的情况下，视觉上隐藏元素。这在基于用户操作或条件的切换显示中非常有用。

然而，使用此方法时，该元素被视为“不存在”，例如隐藏的表单元素不会获得焦点，且不会影响布局。

相比之下，visibility: hidden; 只是隐藏元素本身，但保留空间。当你希望完全隐藏元素时使用 display: none;，当你想保持布局但隐藏内容时使用 visibility: hidden;。

如果你只希望在手机显示时隐藏元素，可以使用媒体查询，例如：@media (max-width: 768px) { .d-none-mobile { display: none; } }。这可以根据屏幕大小和条件灵活地隐藏元素。

已复制！

相关模板