CSS 零基础教程

CSS display 属性

CSS 中的 display 属性决定了元素的渲染方式以及它如何与其他元素进行交互。

理解 display 属性的不同值，特别是 block、inline 和 inline-block，决定了元素的盒模型行为，影响其在文档中的尺寸、间距和流向。

1. 理解 display 属性

display 属性指定了元素的显示类型。每个元素都有一个默认的 display 值，通常是 block 或 inline。但是，你可以使用 CSS 覆盖此默认行为。

1.1 display: block (块级元素)

块级元素总是从新的一行开始，并且占据全部可用的宽度（除非显式设置了宽度）。块级元素完全遵守 width 和 height 属性，以及所有方向上的 margin 和 padding。

display: block 的特征：

  • 从新的一行开始。
  • 占据全部可用宽度 (100%)。
  • 遵守 width 和 height 属性。
  • 遵守 所有方向 (上、右、下、左) 的 margin 和 padding。
  • 可以包含内联元素和其他块级元素。

默认是块级的 HTML 元素示例：

  • <div>
  • <p>
  • <h1> 到 <h6>
  • <form>
  • <header>
  • <footer>
  • <section>

代码示例：

div {
  display: block; /* 虽然这是默认值，但有时显式声明是个好习惯 */
  width: 200px;
  height: 100px;
  background-color: lightblue;
  margin: 20px;
  padding: 10px;
}
<div>这是一个块级元素。</div>
<div>这是另一个块级元素。</div>

在这个例子中，每个 div 都会从新的一行开始。

1.2 display: inline (内联/行内元素)

内联元素不从新的一行开始，只占据必要的宽度。内联元素不遵守 width 和 height 属性。垂直方向的 margin 和 padding 虽然会被应用，但通常不会推开周围的元素（即不影响布局流）。水平方向的 margin 和 padding 会被遵守。

display: inline 的特征：

  • 不从新的一行开始。
  • 只占据内容所需的宽度。
  • 不遵守 width 和 height 属性。
  • 遵守 水平方向的 margin 和 padding。
  • 垂直方向的 margin 和 padding 不影响周围元素的布局（虽然视觉上可能存在）。
  • 不能包含块级元素。

默认是内联的 HTML 元素示例：

  • <span>
  • <a>
  • <img>
  • <strong>
  • <em>

代码示例：

span {
  display: inline;
  background-color: lightcoral;
  margin: 20px; /* 只有左右外边距会真正影响布局 */
  padding: 10px; /* 只有左右内边距会真正影响布局 */
}
<p>
  这是一个 <span>内联</span> 元素。
  <span>另一个内联</span> 元素。
</p>

在这个例子中，span 元素会在 p 元素内流动。垂直方向的 margin 和 padding 可能会遮挡上下行的文字，而不会推开它们。

1.3 display: inline-block (行内块元素)

display: inline-block 是 inline 和 block 的混合体。它允许元素像内联元素一样流动（即不从新的一行开始），但同时又像块级元素一样遵守 width、height 以及所有方向的 margin 和 padding。

display: inline-block 的特征：

  • 不从新的一行开始（像 inline）。
  • 默认只占据内容所需的宽度，但可以设置 width 和 height（像 block）。
  • 遵守 所有方向的 margin 和 padding。
  • 可以包含内联和块级元素。

使用场景：

  • 创建水平导航菜单。
  • 创建像文本一样流动的元素网格（如图片库）。
  • 在不使用浮动 (float) 的情况下并排定位元素。

代码示例：

.inline-block-element {
  display: inline-block;
  width: 150px;
  height: 80px;
  background-color: lightgreen;
  margin: 10px;
  padding: 5px;
  text-align: center;
}
<div>
  <div class="inline-block-element">元素 1</div>
  <div class="inline-block-element">元素 2</div>
  <div class="inline-block-element">元素 3</div>
</div>

在这个例子中，带有 inline-block-element 类的 div 元素将并排显示，并且完全遵守我们设置的宽高和间距。

2. 实战示例与演示

2.1 示例 1：导航菜单

inline-block 的一个常见用例是创建水平导航菜单。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
nav ul {
  list-style: none; /* 移除圆点 */
  margin: 0;
  padding: 0;
  text-align: center; /* 居中菜单项 */
}
nav ul li {
  display: inline-block; /* 让列表项水平排列 */
  margin: 0 10px; /* 项目之间的间距 */
}
nav ul li a {
  display: block; /* 让整个链接区域可点击，且可以设置 padding */
  padding: 10px 20px;
  background-color: #eee;
  text-decoration: none;
}

2.2 示例 2：图片库

你可以使用 inline-block 创建一个简单的图片库。

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
.gallery {
  text-align: center;
}
.gallery img {
  display: inline-block;
  width: 200px;
  height: 150px;
  margin: 10px;
  object-fit: cover;
}

2.3 示例 3：使用 block 创建全宽页眉

<header>
  <h1>My Website</h1>
  <p>A simple website example.</p>
</header>
header {
  display: block;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}
header h1 {
  margin: 0;
}