CSS 显示

CSS 布局 - `display` 属性

display 属性是控制元素布局行为最基本的 CSS 属性之一。它指定了元素在文档流中如何渲染。

理解 Display 值

每个 HTML 元素都有一个默认的 display 值，通常是 block 或 inline，取决于元素类型。理解这些默认值以及如何改变它们是操作布局的关键。

常见的 Display 值：

block：另起一行开始，并占据可用宽度的全部。你可以设置 width、height、margin（上下左右）和 padding。示例：<div>, <p>, <h1>-<h6>, <form>, <header>, <footer>, <section>, <li>。
inline：与文本一同流动，不会另起一行，并且只占据所需的宽度。width 和 height 属性无效。垂直的 margin 和 padding 在布局流中不会被完全尊重（它们不会在垂直方向上推开周围的元素），而水平的 margin 和 padding 是有效的。示例：<span>, <a>, <img>, **, <em>。
inline-block：一种混合类型。像 inline 元素一样流动（不会另起一行），但在 width、height、垂直外边距和内边距方面表现得像 block 元素。常用于将块级元素并排显示。
none：元素完全从文档流中移除。它不会被渲染，不占据任何空间，且不可见。常与 JavaScript 一起用于隐藏/显示元素。
flex：将元素变为一个 flex 容器，为其直接子元素（flex 项目）启用 Flexbox 布局。详情参见响应式布局章节。
grid：将元素变为一个 grid 容器，为其直接子元素（grid 项目）启用 CSS Grid 布局。详情参见响应式布局章节。
contents：从布局中移除元素自身的盒子，但其子元素表现得如同是其父元素的直接子元素。对于不影响布局结构但仍需要语义分组的情况很有用（请谨慎使用，可能影响可访问性）。

示例和用例

块级元素：

一个 <div> 自然会占据全部宽度。

<div style="background-color: lightblue; border: 1px solid blue;">
  I am a div (block-level). I span the full width.
</div>
<div style="background-color: lightcoral; border: 1px solid red; width: 200px;">
  I am a div with a width applied.
</div>

行内元素：

一个 <span> 在文本中流动。

<p>
  This paragraph contains an inline
  <span style="background-color: yellow; border: 1px solid orange;">span element</span>
  which flows with the text.
</p>

覆盖默认 Display：

改变元素的 display 值很常见。一个经典示例是使用列表项创建水平导航菜单。

/* 旧方法（使用 inline 或 inline-block） */
nav.old-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav.old-menu li {
  display: inline-block; /* 或 'inline' */
  margin-right: 10px;
}

/* 现代方法（在父元素上使用 Flexbox） */
nav.flex-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 将 ul 变为一个 flex 容器 */
  gap: 10px; /* flex 项目 (li) 之间的间距 */
}

/* li 元素自动成为 flex 项目 */

对于此类布局，通常首选现代方法，即在父元素 <ul> 上使用 Flexbox（display: flex）。

隐藏元素：`display: none` 与 `visibility: hidden` 的比较

display: none; 和 visibility: hidden; 都可以隐藏元素，但有一个关键区别：

display: none;：将元素完全从布局中移除。它不占用任何空间。
visibility: hidden;：隐藏元素，但它仍在布局中占据其空间。它实际上是不可见的，但仍然影响定位。

.hide-completely {
  display: none;
}

.hide-but-reserve-space {
  visibility: hidden;
}

两者之间的选择取决于你是否希望元素隐藏时布局发生重排。

总结

display 属性对于控制元素如何参与页面布局至关重要。理解 block、inline、inline-block、none、flex 和 grid 构成了构建几乎任何网页布局的基础。

请记住，改变 display 仅改变元素的渲染行为，而非其语义含义（例如，一个通过 display: block; 样式化的 <span> 在语义上仍然是一个行内元素）。

Explore all display values on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/display