CSS 布局简介

常规布局流

如果您没有应用任何 CSS 来改变元素的行为方式，网页上的元素会按照常规流进行布局。您可以通过调整元素在常规流中的位置或完全将它们从常规流中移除来改变它们的行为方式。从一个结构良好、在常规流中可读的稳固文档开始是创建任何网页的最佳方式。它确保即使用户使用非常有限的浏览器或屏幕阅读器等设备来阅读页面内容，您的内容仍然可读。此外，由于常规流旨在创建可读文档，因此通过这种方式开始，您在进行布局更改时是与文档协同工作，而不是对抗它。

在深入研究不同的布局方法之前，值得回顾一下您在之前的模块中关于常规文档流所学到的一些内容。

元素默认是如何布局的？

该过程首先将各个元素的盒子进行布局，使得它们可能拥有的任何内边距、边框或外边距都添加到其内容中。这就是我们所说的盒模型。

默认情况下，块级元素的内容会填充其父元素中可用的行内空间，并沿块维度增长以适应其内容。行内元素的大小就是其内容的大小。您可以为某些默认 display 属性值为 inline 的元素（例如 <img>）设置 width 或 height，但 display 值仍将保持 inline。

如果您想以这种方式控制行内元素的 display 属性，请使用 CSS 将其设置为块级元素的行为（例如，使用 display: block; 或 display: inline-block;，它结合了两者的特性）。

这解释了元素是如何独立构造的，但是当它们相互作用时，它们是如何构造的呢？常规布局流（在布局介绍文章中提到）是元素在浏览器视口内放置的系统。默认情况下，块级元素按照块流方向布局，该方向基于父元素的书写模式（初始：horizontal-tb）。每个元素都会出现在前一个元素下方的新行上，每个元素之间由指定的外边距隔开。例如，在英语中（或任何其他水平、从上到下的书写模式），块级元素是垂直布局的。

行内元素的行为方式不同。它们不会出现在新行上；相反，只要父块级元素的宽度内有足够的空间，它们就会与任何相邻（或换行）的文本内容一起位于同一行。如果没有足够的空间，那么溢出的内容将移动到新行。

如果两个垂直相邻的元素都设置了外边距并且它们的外边距相接触，则较大的外边距保留，较小的外边距消失。这被称为外边距折叠。折叠外边距仅在垂直方向上相关。

常规流示例

让我们看一个简单的例子来解释所有这些

<h1>Basic document flow</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p>
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the size of one of our margins, not both.
</p>

<p>
  Inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line along with adjacent text nodes, if there is space on the same
  line. Overflowing inline elements will
  <span>wrap onto a new line if possible (like this one containing text)</span>,
  or just go on to a new line if not, much like this image will do:
  <img
    src="https://mdn.github.io/shared-assets/images/examples/long.jpg"
    alt="snippet of cloth" />
</p>

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgb(255 84 104 / 30%);
  border: 2px solid rgb(255 84 104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}

请注意 HTML 如何以其在源代码中出现的精确顺序显示，块级元素彼此堆叠。

对于页面上的许多元素，常规流将创建您需要的精确布局。但是，对于更复杂的布局，您需要使用 CSS 中可用的一些工具来更改此默认行为。从一个结构良好的 HTML 文档开始非常重要，因为这样您就可以与事物默认的布局方式协同工作，而不是与它作斗争。

覆盖常规流

可以覆盖常规流并更改元素在 CSS 中布局方式的方法，我们将在本模块中详细介绍，它们是

display 属性

标准值（如 block、inline 或 inline-block）可以改变元素在常规流中的行为方式，例如，使块级元素像行内元素一样行为（我们在盒模型课程中已经介绍过这些）。

浮动

应用 float 值（例如 left）可以使块级元素围绕元素的某一边缘浮动，就像图像在杂志布局中有文本围绕它们一样。

定位

position 属性允许您精确控制盒子在其他盒子内部的放置。static 定位是常规流中的默认值，但您可以使用其他值使元素以不同方式布局，例如，使用 position: fixed 将它们固定在浏览器视口的顶部。

通过 display 访问的特定布局系统

我们还有通过特定 display 值启用的整个布局方法。您需要了解的最重要的是 CSS 网格 和 Flexbox，它们都改变了子元素在其父元素内部的布局方式。

响应式设计

响应式设计指的是创建适应网页渲染的不同设备（例如，台式机和移动电话）的布局。响应式设计本身不提供任何特定的布局工具；其最重要的组成部分是 @media at-rule，它允许您根据屏幕宽度或分辨率等设备属性应用不同的布局。

其他布局技术

还有其他不太常用的布局技术，我们不会在本模块中介绍

表格布局

旨在为 HTML 表格的某些部分设置样式的特性可以使用 display: table 和相关属性应用于非表格元素。

多列布局

多列布局属性可以使块的内容以列的形式布局，就像您在报纸中看到的那样。

总结

本文简要总结了您在学习的这个阶段应该了解的所有布局技术！请继续阅读以获取每种技术的更多信息。接下来，我们将了解浮动。

• 概览：CSS 布局
• 下一页