Block and inline layout in normal flow 正常流中的块和内联布局

您正在阅读此内容的英文版本,因为该语系尚未翻译。 帮助我们翻译此文章吧!

In this guide we will explore the basics of how Block and Inline elements behave when they are part of the normal flow.
在本指南中,我们将探讨块元素和内联元素作为正常流的一部分时的基本行为。

Normal Flow is defined in the CSS 2.1 specification, which explains that any boxes in normal flow will be part of a formatting context. They can be either block or inline, but not both at once. We describe block-level boxes as participating in a block formatting context, and inline-level boxes as participating in an inline formatting context.
正常流在CSS 2.1规范中定义,这解释了正常流中的任何框都是格式化上下文的一部分。它们可以是块或内联的,但不能同时是两个。我们将块级框描述为参与块格式上下文,而内联级框描述为参与内联格式上下文。

The behaviour of elements which have a block or inline formatting context is also defined in this specification. For elements with a block formatting context, the spec says:
具有块或内联格式上下文的元素的行为也在本规范中定义。对于具有块格式上下文的元素,规范说明:

“In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
在块格式上下文中,从包含块的顶部开始,一个接一个地垂直排列框。两个同级框之间的垂直距离由“Margin”属性确定。块格式上下文中相邻块级框之间的垂直边距折叠。

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).” - 9.4.1
在块格式上下文中,每个框的左外边缘接触包含块的左边缘(对于从右到左的格式,右边缘接触)。“-9.4.1

For elements with an inline formatting context:
对于具有内联格式上下文的元素:

“In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.” - 9.4.2
“在内联格式上下文中,框从包含块的顶部开始,一个接一个水平排列。在这些框之间考虑水平边距、边框和填充。这些框可以以不同的方式垂直对齐:它们的底部或顶部可以对齐,或者其中文本的基线可以对齐。包含构成线条的方框的矩形区域称为线条框。”-9.4.2

Note that the CSS 2.1 specification describes documents as being in a horizontal, top to bottom writing mode. For example, by describing vertical distance between block boxes. The behavior on block and inline elements is the same when working in a vertical writing mode, and we will explore this in a future guide on Flow Layout and Writing Modes.
请注意,CSS 2.1规范将文档描述为一种从上到下的水平写入模式。例如,通过描述方框之间的垂直距离。在垂直写入模式下工作时,块元素和内联元素的行为是相同的,我们将在未来的流程布局和写入模式指南中对此进行探讨。

Elements participating in a block formatting context
参与块格式上下文的元素

Block elements in a horizontal writing mode such as English, layout vertically, one below the other.
水平书写模式下的块元素,如英语,垂直布局,一个在另一个之下。

In a vertical writing mode then would lay out horizontally.
在垂直书写模式下,然后水平排列。

In this guide we will be working in English and therefore a horizontal writing mode. However everything described should work in the same way if your document is in a vertical writing mode.
在本指南中,我们将使用英语,因此是水平写作模式。但是,如果您的文档处于垂直书写模式,那么描述的所有内容都应该以相同的方式工作。

As defined in the specification, the margins between two block boxes are what creates separation between the elements. We see this with a very simple layout of two paragraphs, to which I have added a border. The default browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom.
如规范中所定义,两个方框之间的边距是在元素之间创建分隔的原因。我们看到这是一个非常简单的两段布局,我在其中添加了一个边框。默认的浏览器样式表通过在顶部和底部添加边距来增加段落之间的间距。

If we set margins on the paragraph element to 0 then the borders will touch.
如果我们将paragraph元素的边距设置为0,则边框将接触。

By default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block. If we give them a width, the will continue to lay out one below the other - even if there would be space for them to be side by side. Each will start against the start edge of the containing block, so the place at which sentences would begin in that writing mode.
默认情况下,块元素将占用内联方向上的所有空间,因此我们的段落将展开,并在其包含的块中尽可能大。如果我们给它们一个宽度,它们将继续在另一个宽度的下面布置——即使有空间让它们并排放置。每个都将从包含块的起始边缘开始,所以句子将在该书写模式下开始的位置。

Margin collapsing
Margin 塌陷

The spec explains that margins between block elements collapse. This means that if you have an element with a top margin immediately after an element with a bottom margin, rather than the total space being the sum of these two margins, the margin collapses, and so will essentially become as large as the larger of the two margins.
规范解释了块元素之间的边距会折叠。这意味着,如果有一个元素在具有下边缘的元素之后立即具有上边缘,而不是总空间是这两个边缘的总和,则边缘会折叠,因此基本上会变得与两个边缘中的较大者一样大。

In the example below, the paragraphs have a top margin of 20px and a bottom margin of 40px. The size of the margin between the paragraphs is 40px as the smaller top margin on the second paragraph has collapsed with the larger bottom margin of the first.
在下面的示例中,段落的上边距为20px,下边距为40px。段落之间的边距大小为40px,因为第二段的较小上边距已随着第一段的较大下边距折叠。

You can read more about margin collapsing in our article Mastering Margin Collapsing.
你可以在我们的文章《掌握边缘崩溃》中阅读更多关于边缘崩溃的内容。

Note: if you are not sure whether margins are collapsing, check the Box Model values in your browser DevTools. This will give you the actual size of the margin which can help you to identify what is happening.
 

Elements participating in an inline formatting context
参与内联格式上下文的元素

Inline elements display one after the other in the direction that sentences run in that particular writing mode. While we don’t tend to think of inline elements as having a box, as with everything in CSS they do. These inline boxes are arranged one after the other. If there is not enough space in the containing block for all of the boxes a box can break onto a new line. The lines created are known as line boxes.
内联元素按照句子在特定书写模式下运行的方向依次显示。虽然我们不倾向于认为内联元素有一个框,就像CSS中的所有元素一样。这些内嵌的盒子一个接一个排列。如果包含块中没有足够的空间容纳所有框,则框可以换行。创建的行称为行框。

In the following example we have three inline boxes created by a paragraph with a strong element inside it.
在下面的示例中,我们有三个由段落创建的内联框,其中包含一个强元素。

The boxes around the words before the strong element and after the strong element are referred to as anonymous boxes, boxes introduced to ensure that everything is wrapped in a box, but ones that we cannot target directly.
在强元素前和强元素后的单词周围的框称为匿名框,引入的框确保所有内容都包装在一个框中,但我们不能直接针对它们。

The line box size in the block direction (so the height when working in English) is defined by the tallest box inside it. In the next example I have made the strong element 300%, that content now defines the height of the line box on that line.
块方向上的线框大小(以英文工作时的高度为准)由其内部最高的框定义。在下一个示例中,我将强元素300%设为内容,该内容现在定义了该行上行框的高度。

Find out more about how Block and Inline Boxes behave in our Guide to the Visual Formatting Model.
在我们的视觉格式模型指南中,了解更多关于块和内联框的行为。

The display property and flow layout
显示属性和流布局编辑

In addition to the rules existing in CSS2.1, new levels of CSS further describes the behaviour of block and inline boxes. The display property defines how a box, and any boxes inside it behaves. In the CSS Display Model Level 3 we can learn more about how the display property changes the behaviour of boxes and the boxes they generate.
除了CSS2.1中现有的规则之外,新级别的CSS还进一步描述了块和内联框的行为。“显示”属性定义框及其内部的所有框的行为方式。在CSS显示模型级别3中,我们可以进一步了解显示属性如何更改框及其生成的框的行为。

The display type of an element defines the outer display type, this dictates how the box displays alongside other elements in the same formatting context. It also defines the inner display type, which dictates how boxes inside this element behave. We can see this very clearly when considering a flex layout. In the example below I have a div, which I have given display: flex. The flex container behaves like a block element, it displays on a new line and takes up all of the space it can in the inline direction. This is the outer display type of block.
一个元素的显示类型定义了外部显示类型,这规定了该框如何与同一格式上下文中的其他元素一起显示。它还定义了内部显示类型,该类型指示此元素内的框的行为方式。在考虑灵活布局时,我们可以很清楚地看到这一点。在下面的示例中,我有一个DIV,我已经给出了display:flex。flex容器的行为类似于一个块元素,它显示在一条新行上,并占用它在内联方向上可以占用的所有空间。这是块的外部显示类型。

The flex items however are participating in a flex formatting context, because their parent is the element with display: flex, which has an inner display type of flex, establishing the flex formatting context for the direct children.
但是,flex项正在参与flex格式上下文,因为它们的父级是带有display:flex的元素,后者具有flex的内部显示类型,为直接子级建立flex格式上下文。

Therefore you can think of every box in CSS working in this way. The box itself has an outer display type, so it knows how to behave alongside other boxes. It then has an inner display type which changes the way its children behave. Those children then have an outer and inner display type too. The flex items in the previous example become flex level boxes, so their outer display type is dictated by way of them being part of the flex formatting context. They have an inner display type of flow however, meaning that their children participate in normal flow. Items nested inside our flex item lay themselves out as block and inline elements unless something changes their display type.
因此,您可以想到CSS中的每个框都是以这种方式工作的。盒子本身有一个外部显示类型,所以它知道如何与其他盒子一起工作。然后它有一个内部显示类型,它改变了它的子对象的行为方式。然后,这些子级也有一个外部和内部显示类型。上一个示例中的flex项变为flex级别框,因此它们的外部显示类型取决于它们是flex格式上下文的一部分。然而,他们有一种内在的流动显示类型,这意味着他们的孩子参与正常的流动。嵌套在flex项中的项将自己设置为块和内联元素,除非有什么改变了它们的显示类型。

This concept of the outer and inner display type is important as this tells us that a container using a layout method such as Flexbox (display: flex) and Grid Layout (display: grid) is still participating in block and inline layout, due to the outer display type of those methods being block.
外部和内部显示类型的概念很重要,因为这告诉我们,由于这些方法的外部显示类型为块,因此使用flexbox(display:flex)和grid layout(display:grid)等布局方法的容器仍在参与块和内联布局。

Changing the Formatting Context an element participates in
更改元素参与的格式上下文

Browsers display items as part of a block or inline formatting context in terms of what normally makes sense for that element. For example a strong element is used to highlight a word, and displays bold in browsers. It would not generally make sense for that strong element to be displayed as a block level element, breaking onto a new line. If you did want all strong elements to display as block elements, you could do so by setting display: block on strong. This means that you can always use the most semantic HTML element to markup your content, and then change the way it displays using CSS.
浏览器将项目显示为块或内联格式上下文的一部分,根据该元素通常的意义。例如,强元素用于突出显示单词,并在浏览器中显示粗体。一般来说,将该强元素显示为块级元素并中断到新行是没有意义的。如果确实希望所有强元素显示为块元素,可以通过将display:block设置为强来实现。这意味着您可以始终使用最语义的HTML元素标记内容,然后使用CSS更改其显示方式。

Summary 总结

In this guide we have looked at how elements display in normal flow, as block and inline elements. Due to the default behaviour of these elements, an HTML document with no CSS styling at all, will display in a readable way. By understanding how normal flow works you will find layout easier, as you understand the starting point for making changes to how elements are displayed.
在本指南中,我们研究了元素在正常流中如何显示为块和内联元素。由于这些元素的默认行为,一个完全没有CSS样式的HTML文档将以可读的方式显示。通过了解正常流的工作方式,您将更容易找到布局,因为您了解更改元素显示方式的起点。

See Also 另请参见