内联块 vs 内联块 vs 块

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

每个 HTML 元素都是一个矩形或正方形的块，并拥有一个 display 属性。除非明确指定，否则所有元素的 display 属性值都设置为 inline、inline-block 或 block，表格及其关联元素除外。了解这些 HTML 元素的行为至关重要，因为它们是我们布局的基石。

排队

以下是一些常见的行内元素列表。

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

行内元素会并排排列在同一行中，不同的行内元素或行内块级元素也会如此。你可以把它们想象成上面封面照片中的石头。只有当同一行空间不足以容纳更多行内元素时，它们才会另起一行。

我将多个行内元素堆叠在一起。

<a href="#">Link</a>
<img src="https://picsum.photos/30" />
<span>Span</span>
<strong>Strong Player</strong>

使用行内元素时需要注意一点：您无法设置特定的高度、宽度以及上边距或下边距属性。因此，如果没有内边距或侧边距，行内元素的大小将仅与其内容的大小相同。

可以看到，这些 CSS 属性不会影响行内元素。

<a href="#">Anchor tag</a>

a {
  background: orangered;
  width: 300px;
  height: 300px;
  margin-top: 100px;
  margin-bottom: 100px;
}

除了直接使用行内元素之外，一个非常常见的例子是，当你想单独给某个元素添加样式时。

<p>
  Hi, my name is <strong>Phillip</strong> and I am a
  <span>software developer</span>
</p>

span {
  color: lime;
}

行内块

以下是一些常见的行内块元素列表

• <input>
• <button>
• <select>
• <textarea>

有趣的是，你会发现这些元素大多与元素相关<form>。行内块元素与行内元素本质上非常相似。它们可以执行行内元素的所有操作，还可以设置宽度、高度和垂直边距！

使用行内块元素可以轻松创建简单的表单。行内块元素的一个缺点是它们会在自身周围创建空白区域。（请注意输入框和按钮之间的空白区域）。

<input type="text" /> <button>Submit</button>

input {
  width: 300px;
  height: 50px;
}

button {
  width: 100px;
  height: 50px;
  margin-top: 20px;
}

堵塞

以下是常用块元素列表

• <p>
• <h1>
• <div>
• <header>

块级元素总是另起一行，并且会占据整行或整宽的空间。这意味着不能有其他 HTML 元素与块级元素并排显示。您还可以设置块级元素的宽度、高度和垂直边距。

一种常见场景是博客文章中的一系列段落。

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde autem,
  consequatur deleniti nobis beatae quo dolore nemo corporis. Ad delectus
  dignissimos pariatur illum eveniet dolor rem eius laborum sed iure!
</p>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde autem,
  consequatur deleniti nobis beatae quo dolore nemo corporis. Ad delectus
  dignissimos pariatur illum eveniet dolor rem eius laborum sed iure!
</p>

可容纳且灵活

有些元素可以包含其他元素，有些则不行。一般来说，要遵循从大到小的层级结构。在 `div` 元素内嵌套 `inline` 或 `inline-block` 元素不会有问题，样式也会正常显示。但是，如果尝试将 `block` 元素放入 `span` 元素内，则会出现一些奇怪的问题。

你看到的这种现象非常奇怪。span 标签内的段落背景不是红色而是绿色？

<span>asdf<p>gg</p></span>

span {
  background: red;
  color: green;
}

到目前为止，我只展示了它们原本的样子。但你可以手动修改 CSS 显示属性来实现你想要的布局。你可以轻松地将一个 div 元素的 display 属性设置为 inline，它就会像一个行内元素一样工作。例如：

请注意，div 元素的背景颜色并没有铺满整个宽度！

<div>I am a div</div>

div {
  display: inline;
  background: orange;
}

概要

我制作了一个表格，用来概括文章中提出的基本要点。

以下是一些有用的参考资料。

模块级元素的完整列表。

完整的行内元素列表：包括行内块元素。

感谢阅读！希望本文能帮助您在下次创建 CSS 布局时更好地运用这些构建模块。