CSS 显示

CSS 显示 (Display) 与可见性 (Visibility)

理解元素是如何显示以及它们的可见性对于控制 CSS 中的布局和外观至关重要。

display 属性是控制布局最重要的 CSS 属性之一。它指定了元素在文档中的渲染方式。

visibility 属性指定元素是可见还是隐藏，但隐藏的元素仍然会影响布局。

隐藏元素：`display: none` 与 `visibility: hidden` 的区别

display: none 将元素完全从文档流中移除。它不会占用任何空间，页面将像该元素不存在一样渲染。

.hide-with-display {
  display: none;
}

visibility: hidden 隐藏元素，但它仍在布局中占据空间。页面布局会受到影响，就像元素在那里一样，只是它不可见。

.hide-with-visibility {
  visibility: hidden;
}

主要区别：当你想要完全移除一个元素并让布局随之调整时，使用 display: none。当你需要隐藏一个元素但保留其占用的空间时，使用 visibility: hidden。

常见的 `display` 属性值

块级元素 (Block-level Elements)（`display: block`）

块级元素总是从新行开始，并且默认占用全部可用宽度（在其容器内尽可能向左和向右延伸）。你可以在块级元素上设置 width（宽度）、height（高度）、margin（外边距）和 padding（内边距）。

默认块级元素的例子：

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
<li>

内联元素 (Inline Elements)（`display: inline`）

内联元素不会从新行开始，并且只占用与其内容所需的宽度。你无法在内联元素上设置 width 或 height（即使设置了也通常会被忽略）。垂直方向的 margin 和 padding 可能会出现意料之外的行为。

这是一个段落内的内联 <span> 元素。

默认内联元素的例子：

<span>
<a>
<img>
**
<em>

内联块级元素 (Inline-block Elements)（`display: inline-block`）

inline-block 元素就像是混合体。它像内联元素一样与文本流排（不另起新行），但你可以像块级元素一样设置它的 width、height、margin 和 padding。

这对于创建按钮或小方框等元素非常有用，它们应该并排显示但又具有明确的尺寸。

.inline-block-example {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

其他重要的 Display 属性值

display: flex：为元素的直接子元素启用 Flexbox 布局。这是创建一维布局（行或列）的强大工具。

display: grid：为元素的直接子元素启用 CSS Grid 布局。适用于创建复杂的二维布局。

display: contents：使元素本身不生成任何盒子，使其子元素表现得如同它们是该元素父元素的直接子元素一样。使用时需谨慎，因为它可能会影响可访问性 (accessibility)。

改变元素的默认显示类型

你可以改变元素的默认显示类型。例如，将列表项 (list items) 设置为 inline-block 以创建水平菜单：

li {
  display: inline-block;
  margin-right: 10px;
  padding: 5px;
  background-color: #f0f0f0;
}

/* Or making span elements behave like blocks: */
span.block-span {
  display: block;
  background-color: lightgreen;
  padding: 10px;
  margin-bottom: 5px;
}

注意：改变 display 属性只影响元素在视觉上的渲染方式以及它如何与布局交互。它不会改变元素的语义含义 (semantic meaning) 或其允许的内容模型 (content model)（例如，根据 HTML 规则，设置为 display: block 的内联元素 <span> 仍然不应该包含块级元素，尽管浏览器可能会渲染它）。

实际应用：切换内容的可见性

JavaScript 通常用于动态地改变 display 属性（例如，从 none 到 block）来显示或隐藏下拉菜单 (dropdown menus)、模态框 (modals) 或可折叠部分 (collapsible sections) 等元素。这是交互式用户界面 (interactive user interfaces) 中常见的模式。

CSS 显示

CSS 显示 (Display) 与可见性 (Visibility)

隐藏元素：display: none 与 visibility: hidden 的区别

常见的 display 属性值

块级元素 (Block-level Elements)（display: block）

内联元素 (Inline Elements)（display: inline）

内联块级元素 (Inline-block Elements)（display: inline-block）