CSS中的“包含块"和“块容器盒"有什么区别? [英] What is the difference between 'containing block' and 'block container box' in CSS?

问题描述

我正在阅读CSS规范，有关视觉格式模型的部分，以及试图了解这两个术语containing block和block container box之间的区别.

I am reading CSS specs, the section on Visual Formatting Model and trying to understand what is the difference between these two terms: containing block and block container box.

让我感到困惑的是，似乎完全不同的概念所使用的单词的变化形式:

What confuses me is the variation of words that are used for what seems to be completely different concepts:

• box与block
• containing与container

• box vs block
• containing vs container

在谈论视觉格式CSS时，block是否与box相同?如果没有，有什么区别?这两种东西都是在屏幕上可见"的吗?

Is block same as box when talking about visual formatting CSS? If not, what is the difference? Are both of these something that is "visible" on the screen?

通常，我在规格书中看到block时应该怎么看?当我阅读规范中的box时，首先应该想到什么?

In general, how should I think when I see block in the specification? Also what should first come to my mind when I read box in the specs?

这些概念的一些有用的隐喻或类比对建立心理模型非常有帮助.

Some helpful metaphors or analogies for these concepts would be very helpful to create a mental model.

推荐答案

让我们从头开始. CSS几乎完全是关于盒子的.盒子只是画布的矩形区域.画布是在其上绘制所有内容的整个2D空间.

Let's start at the beginning. CSS is almost entirely about boxes. A box is just a rectangular area of the canvas. The canvas is the entire 2D space on which everything is drawn.

CSS盒具有多种口味.块框，块级框，内联框，内嵌级框，内容框，填充框，边框，边距框，表格框，线框，伸缩框等.它们都是矩形区域.

CSS Boxes have a whole range of flavours. Block boxes, block-level boxes, inline boxes, inline-level boxes, content boxes, padding boxes, border boxes, margin boxes, table boxes, line boxes, flex boxes, and so on. They're all just rectangular areas.

因此，积木只是盒子的一种.上面的许多盒子都有两个行为特征-相对于它们的容器和同位体如何布置，以及它们在内部的内容布置方式. CSS-display规范将它们称为 display-outside 和分别显示内部

So a block is just one type of box. Many of the above boxes are characterized by two behaviours - how they are laid out relative to their containers and peers, and how their content is laid out within them. The CSS-display spec refers to these as display-outside and display-inside respectively

显示外部是指框的"*级别"性质.他们不是我们在这里感兴趣的.

Display-outside refers to the "*-level" nature of the boxes. They're not what we're interested in here.

所有块盒和某些内联级别的盒都是块容器盒.块容器框是块容器"类型的框，不一定是包含块的框.不是块级框的块容器包括display:inline-block和display:table-cell

All block boxes, and some inline-level boxes are block container boxes. A block container box is a box of type "block container", not necessarily a box that contains blocks. Block containers that are not block-level boxes include those that are display:inline-block and display:table-cell

块容器"中的块"是指其内部显示行为.块状框在其中垂直放置，文本水平排列，通常受矩形边缘限制.

The "block" in "block container" refers to its display-inside behaviour. Block boxes are laid out vertically within them and text flows horizontally, ordinarily limited by its edges of the rectangle.

因此，块容器框"是框的类型.相反，包含块"是指特定的框.画布上定义的每个框都只有一个包含块，只有一个例外，称为初始包含块，其中没有包含块.

So a "block container box" is a type of box. In contrast, "containing block" refers to a specific box. Each box defined on the canvas has exactly one containing block, with just one exception, called the initial containing block, which has no containing block.

只有块容器盒"类型的盒子可以是盒子的包含块.

Only a box of type "block container box" can be a box's containing block.

时间为例.假设我们有以下HTML:我故意在整个过程中使用<span>元素，因为这完全是关于CSS的，并且我不想与HTML行为混淆.

Time for an example. Let's suppose we have the HTML below: I'm deliberately going to use <span> elements throughout, because this is all about CSS, and I don't want to confuse with HTML behaviour.

<span id="level1">
  foo
  <span id="level2">
    bar
    <span id="level3">
      baz
      <span id="level4">
        qux
      </span>
    </span>
  </span>
</span>

CSS非常简单.只是

The CSS is very simple. Just

#level1 { display:inline-block }

其他范围是CSS默认显示设置内联".

The other spans are the CSS default display setting, "inline".

现在，考虑#level4跨度.它的父级是'#level3'跨度，它是display:inline，因此'#level3'跨度不会形成块容器框.同样，#level2范围也不会形成块容器框.但是#level1元素是display:inline-block.这形成一个内联级别的框，但它是一个块容器框. (这就是内联块"的意思).

Now, consider the #level4 span. Its parent is the '#level3' span, which is display:inline so the '#level3' span does not form a block container box. Similarly, the #level2 span also does not form a block container box. But the #level1 element is display:inline-block. That forms an inline-level box, but one that is a block container box. (This is what "inline-block" means).

因此，由#level2，#level3，#level4跨度组成的所有内联框的包含块以及它们的文本内容是由#level1元素的框形成的块容器框.

So the containing block for all the inline boxes formed by the #level2, #level3, #level4 spans and their text content is the block container box formed by the #level1 element's box.

这篇关于CSS中的“包含块"和“块容器盒"有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！