普通流

本文解释了普通流,或者如果您没有更改其布局,网页元素如何自行布局。

先决条件 HTML 基础知识(学习 HTML 简介),以及 CSS 工作原理的概念(学习 CSS 简介)。
目标 解释浏览器在默认情况下如何布局网页,在我们开始进行更改之前。

如上一课介绍布局中所述,如果您没有应用任何 CSS 来更改网页元素的行为方式,则这些元素将按普通流进行布局。而且,正如我们开始发现的那样,您可以通过调整元素在普通流中的位置或完全将其从普通流中移除来更改元素的行为方式。从一个在普通流中可读的、结构良好的文档开始是构建任何网页的最佳方式。它确保即使用户使用的是非常有限的浏览器或诸如屏幕阅读器之类的读取页面内容的设备,您的内容也仍然可读。此外,由于普通流旨在创建可读的文档,因此通过这种方式开始,您是在配合文档而不是在对抗文档,因为您正在对布局进行更改。

在更深入地研究不同的布局方法之前,值得回顾一下您在以前模块中学习的一些关于普通文档流的内容。

元素默认如何布局?

该过程从单个元素的框以某种方式布局开始,以便将它们可能具有的任何填充、边框或边距添加到其内容中。这就是我们所说的盒模型

默认情况下,块级元素的内容会填充包含它的父元素的可用内联空间,并沿块维度增长以适应其内容。 内联级元素的大小仅与其内容的大小相同。您可以在某些元素上设置 widthheight,这些元素具有 inline 的默认 display 属性值,例如 <img>,但 display 值仍将保持 inline

如果要以这种方式控制内联级元素的 display 属性,请使用 CSS 将其设置为表现得像块级元素(例如,使用 display: block;display: inline-block;,它混合了这两者的特性)。

这解释了元素是如何单独构建的,但它们相互交互时是如何构建的呢?普通布局流(在布局简介文章中提到)是元素放置在浏览器视口中使用的系统。默认情况下,块级元素按块流方向布局,该方向基于父元素的 书写模式初始:horizontal-tb)。每个元素都将显示在最后一个元素下方的新行上,每个元素之间都由指定的边距分隔。例如,在英语中(或任何其他水平的从上到下的书写模式),块级元素垂直布局。

内联元素的行为有所不同。它们不会出现在新行上;相反,只要有足够的空间,它们会与任何相邻(或换行)的文本内容一起出现在同一行上,前提是在父块级元素的宽度内。如果没有足够的空间,则溢出的内容将移至新行。

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

让我们看一个简单的例子来解释这一切

html
<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="long.jpg" alt="snippet of cloth" />
</p>
css
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;
}

总结

在本课中,您学习了正常流的基本知识——CSS 元素的默认布局。通过了解内联元素、块级元素和边距的默认行为,将来修改其行为将变得更容易。

在下一篇文章中,我们将在此基础上,使用弹性盒布局来更改 CSS 元素。