正常流量

本文介绍了正常流程，或者在你未更改网页元素布局的情况下网页元素的布局方式。

¥This article explains normal flow, or the way that webpage elements lay themselves out if you haven't changed their layout.

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

正如介绍布局的上一课中详细介绍的，如果你没有应用任何 CSS 来更改网页上的元素的行为方式，那么网页上的元素会按正常流程进行布局。而且，正如我们开始发现的那样，你可以通过调整元素在正常流中的位置或将它们从正常流中完全删除来改变元素的行为方式。从一个在正常流程中可读的可靠、结构良好的文档开始是开始任何网页的最佳方式。即使用户使用非常有限的浏览器或屏幕阅读器等读出页面内容的设备，它也可以确保你的内容可读。此外，由于正常流程旨在创建可读文档，因此通过这种方式开始，你可以处理文档，而不是在更改布局时与它作斗争。

¥As detailed in the last lesson introducing layout, elements on a webpage lay out in normal flow if you haven't applied any CSS to change the way they behave. And, as we began to discover, you can change how elements behave either by adjusting their position in normal flow or by removing them from it altogether. Starting with a solid, well-structured document that's readable in normal flow is the best way to begin any webpage. It ensures that your content is readable even if the user's using a very limited browser or a device such as a screen reader that reads out the content of the page. In addition, since normal flow is designed to make a readable document, by starting in this way you're working with the document rather than struggling against it as you make changes to the layout.

在深入研究不同的布局方法之前，值得重新回顾一下你在之前的模块中研究过的有关正常文档流的一些内容。

¥Before digging deeper into different layout methods, it's worth revisiting some of the things you have studied in previous modules with regard to normal document flow.

元素默认是如何布局的？

¥How are elements laid out by default?

该过程开始时，各个元素的框的布局方式是将它们恰好具有的任何填充、边框或边距添加到其内容中。这就是我们所说的盒子模型。

¥The process begins as the boxes of individual elements are laid out in such a way that any padding, border, or margin they happen to have is added to their content. This is what we call the box model.

默认情况下，块级元素的内容填充包含它的父元素的可用内联空间，并沿着块维度增长以容纳其内容。行内元素的大小正是其内容的大小。你可以在某些默认 display 属性值为 inline 的元素上设置 width 或 height，例如 <img>，但 display 值仍将保留 inline。

¥By default, a block-level element's content fills the available inline space of the parent element containing it, growing along the block dimension to accommodate its content. The size of inline-level elements is just the size of their content. You can set width or height on some elements that have a default display property value of inline, like <img>, but display value will still remain inline.

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

¥If you want to control the display property of an inline-level element in this manner, use CSS to set it to behave like a block-level element (e.g., with display: block; or display: inline-block;, which mixes characteristics from both).

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

¥That explains how elements are structured individually, but how about the way they're structured when they interact with one another? The normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport. By default, block-level elements are laid out in the block flow direction, which is based on the parent's writing mode (initial: horizontal-tb). Each element will appear on a new line below the last one, with each one separated by whatever margin that's been specified. In English, for example, (or any other horizontal, top to bottom writing mode) block-level elements are laid out vertically.

内联元素的行为有所不同。它们不会出现在新行中；相反，它们都与任何相邻（或换行）文本内容位于同一行，只要它们在父块级元素的宽度内有空间即可这样做。如果没有空间，则溢出的内容将下移到新行。

¥Inline elements behave differently. They don't appear on new lines; instead, they all sit on the same line along with any adjacent (or wrapped) text content as long as there is space for them to do so inside the width of the parent block level element. If there isn't space, then the overflowing content will move down to a new line.

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

¥If two vertically adjacent elements both have a margin set on them and their margins touch, the larger of the two margins remains and the smaller one disappears. This is known as margin collapsing. Collapsing margins is only relevant in the vertical direction.

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

¥Let's look at a simple example that explains all of this:

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;
}

概括

¥Summary

在本课程中，你学习了正常流程的基础知识 - CSS 元素的默认布局。通过了解内联元素、块元素和边距的默认行为方式，将来可以更轻松地修改它们的行为。

¥In this lesson you've learned the basics of normal flow — the default layout for CSS elements. By understanding how inline elements, block elements, and margins behave by default, it'll be easier to modify their behavior in the future.

在下一篇文章中，我们将在这些知识的基础上，使用 flexbox 更改 CSS 元素。

¥In the next article, we'll build on this knowledge by making changes to CSS elements using flexbox.