css - block 级框和主要 block 级框有什么区别？

Question

引用spec :

Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme. Some block-level elements may generate additional boxes in addition to the principal box: 'list-item' elements. These additional boxes are placed with respect to the principal box.

它们本质上是一样的吗？

Answer 1

主要的 block 级框是由给定元素生成的 block 级框，它直接受应用于该元素的样式规则的影响。

大多数元素只生成一个框。对于这些元素，它们本质上是相同的东西，因为不涉及其他框。

但是，一个元素可以根据其显示类型生成多个框，例如 list item ;当您为此类元素声明样式时，这些样式通常会应用于主框，并且生成的任何其他框都将相应地呈现。

例如，一个列表项除了主框外还有一个标记框；如果指定 list-style-position: outside，列表标记将放置在主体框的边界之外，但主体框的背景和边框不会受到影响。请注意，标记框仍然是主框的后代，因此 color 等可继承属性将应用于标记(这就是为什么 color: red 将文本和它的子弹标记红色)。

大多数其他 block 级元素，包括display: block但不包括display:table(参见section 17.4)，将简单地生成一个用于内容的主要 block 框，仅此而已，使它们本质上只是“ block 框”，但仅用于那些元素。

换句话说，所有principal block-level boxes都是block-level boxes，但并不是所有的block-level boxes都是principal，例如anonymous block boxes .此外，内联元素(包括内联 block )本身不会生成任何主体框，也不存在主体内联框这样的东西。