CSS 显示

display 属性是 CSS 中最重要、最基本的属性之一。它定义了一个元素应如何被显示，以及它在布局中的行为方式。每个 HTML 元素都有一个默认的 display 值。

display: block; (块级)

块级元素会占据其父元素的整个可用宽度，并且总是在一个新行上开始。

• 特征: 独占一行，像一个矩形块。
• 尺寸: 可以设置 width, height, margin, padding。
• 默认块级元素: <div>, <h1>-<h6>, <p>, <form>, <ul>, <li> 等。

div {
  display: block;
  width: 100%;
  height: 100px;
  background-color: lightblue;
}

display: inline; (内联)

内联元素不会开始新行，它会和其他内联元素一起排列在同一行上，直到行尾。

• 特征: 像文本一样，一个接一个地排列。
• 尺寸: 元素的宽度和高度由其内容决定。直接设置 width 和 height 无效。垂直方向的 margin 和 padding 也不会影响周围元素。
• 默认内联元素: <span>, <a>, <img>, <strong>, <em>, <b>, <i> 等。

span {
  display: inline;
  padding: 5px;
  background-color: yellow;
}

display: inline-block; (内联块级)

inline-block 是 block 和 inline 的混合体，它结合了两者的优点。

• 特征: 元素像内联元素一样与其他元素并排，但它本身表现得像一个块级元素。
• 尺寸: 可以设置 width, height, margin, padding。
• 应用: 非常适合用于创建并排的、有固定尺寸的元素，如导航栏按钮、标签云等。

a.button {
  display: inline-block;
  width: 120px;
  height: 40px;
  background-color: lightgreen;
  text-align: center;
  line-height: 40px; /* 垂直居中文本 */
}

display: none;

display: none; 会将元素从页面上完全移除。它不仅是不可见的，而且在布局中也不占据任何空间，就好像它从来不存在一样。

这与 visibility: hidden; 不同。visibility: hidden; 只是将元素隐藏起来，但它在布局中仍然占据着原来的空间。

.hidden-element {
  display: none;
}

display: none; 经常被 JavaScript 用来控制元素的显示和隐藏。

display: flex; 和 display: grid;

这是 CSS3 引入的现代布局模式，它们极大地简化了复杂布局的创建。

• display: flex;: 将元素变为一个“弹性容器”，其直接子元素成为“弹性项目”。它非常适合在一维空间（行或列）中对齐和分布项目。
• display: grid;: 将元素变为一个“网格容器”。它允许你在二维空间（行和列）中创建复杂的布局。

我们将在后续的专门章节中详细学习 Flexbox 和 Grid。

总结

display 值	换行	可设置宽高	可设置垂直 margin/padding
block	是	是	是
inline	否	否	否
inline-block	否	是	是
none	-	-	-