css – 块级框和主要块级框之间有什么区别？

引用 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.

它们基本上是一回事吗？

解决方法

主块级框是由给定元素生成的块级框,该元素直接受适用于该元素的样式规则的影响.

大多数元素只生成一个框.对于这些元素,它们基本上是相同的,因为没有涉及其他框.

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

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

大多数其他块级元素,包括display：block但不包括display：table(参见section 17.4),只会为其内容生成一个主要的块框,而不是其他内容,使它们基本上只是“块框”,但仅限于这些元素.

换句话说,所有主要块级框都是块级框,但并非所有块级框都是主体,例如anonymous block boxes.此外,内联元素(包括内联块)本身不生成任何主框,也不存在像一个主要的内联盒子这样的东西.

原文地址：https://www.jb51.cc/css/217603.html