“块框”和“块级元素”有什么区别？

Question

This MDN doc says:

In CSS we broadly have two types of boxes - block boxes and inline boxes.

But in this MDN doc that talks about normal flow, block boxes are never mentioned. Only block-level elements are mentioned.

What is the difference?

Answer 1

Block vs Block-Level

Lots. Block boxes are both block-level and also block containers. That's display:block , display:flow-root , the principal box of display:list-item and the table wrapper box of display:table .

Boxes that are block-level, but not block containers, and therefore not block boxes are those which have eg display:flex , display:grid and the table grid box of display:table

Boxes that are block containers, but not block-level, and therefore not block boxes are those which have eg display:inline-block and display:table-cell .

Stating that there are broadly two types of boxes - block and inline - is at best misleading, if not outright wrong. We could better say that there are broadly two types of boxes - block-level and inline-level, but even then, only broadly . Block-level boxes are participants in a Block Formatting Context. Inline-level boxes are participants in an Inline Formatting Context. Boxes that are participants in other formatting contexts, such as flex items, grid items, and some of the internal table and ruby boxes are neither.

Elements vs Boxes

Elements are objects of SGML, HTML and DOM. Boxes are objects of CSS. A block-level element is one that when the CSS box tree is being formed, by default generates at least a principal box which is block-level.