块级元素vs块格式化上下文 [英] Block Level Element vs Block Formatting Context

问题描述

作为块级元素的HTML元素与形成块格式化上下文的HTML元素之间的区别是什么？

HTML元素可以是块级元素并形成块格式化上下文？

作为块级元素意味着它形成块格式化上下文，或者相反，形成块格式化上下文暗示

在类似的情况下，这怎么转化为内联元素和元素形成一个内联的格式化上下文？

（对于某些上下文，我一直试图阅读

解决方案

请注意，这个答案使用术语框代替元素，因为CSS区分元素和框。为了这个答案的目的，HTML元素由CSS布局中的单个框表示。实际上，一个元素可以生成任意数量的盒子（或者根本不生成，如 display：none ），但这超出了这个问题的范围。

HTML元素既可以是块级元素也可以形成块格式化上下文？

是的。块框（即块级块容器框）可以建立BFC的标准在 CSS2.1的第9.4.1节，即：

• 浮动，


• 绝对定位的元素和


• 除了'visible'之外的overflow的块框（除非将该值传播到视口）







是一个块级元素，意味着它形成一个块格式化上下文，或者相反，形成块格式化上下文意味着它必须是块级元素？




b
$ b



1. 上述答案意味着不是所有的块框都建立块格式化上下文。一个带有CSS属性的块框 display：block; overflow：visible; float：none;


2. 相反，inline-block是一个框的示例，它建立了一个BFC，但它本身是内联级的







类似地，这是如何转换为内联元素和元素




内联框是一个内联级框，其内容直接参与其父内联格式化上下文请参阅第9.4.2节）。值得注意的是，可以建立内联格式化上下文的框只是块容器框。





内联框和内联框之间的区别是内联块的内容参与它建立的BFC，而不是在父的IFC中。相反，只有inline-block本身参与其父的IFC。




What is the difference between a HTML element that is a block level element and a HTML element that forms a block formatting context?

Can a HTML element be both a block level element and form a block formatting context?

Does being a block level element imply that it forms a block formatting context, or conversely, does forming a block formatting context imply that it must be a block level element?

In a similar vein, how does this translate to inline elements and elements that form an inline formatting context?

(For some context, I've been trying to read Learn CSS Layout - The Pedantic Way but it's been a bit challenging to follow Chapter 1)

解决方案

Note that this answer uses the term "box" in lieu of "element", as CSS makes a distinction between elements and boxes. For the purposes of this answer, an HTML element is represented by a single box in CSS layout. In reality an element may generate any number of boxes (or none at all, as in display: none), but that's outside the scope of this question.

Can a HTML element be both a block level element and form a block formatting context?

Yes. The criteria in which a block box (i.e. a block-level block container box) may establish a BFC are stated in section 9.4.1 of CSS2.1, namely:

• floats,
• absolutely positioned elements, and
• "block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport)" (as directly quoted from the spec)

Does being a block level element imply that it forms a block formatting context, or conversely, does forming a block formatting context imply that it must be a block level element?

Neither:

1. The above answer implies that not all block boxes establish block formatting contexts. A block box with the CSS properties display: block; overflow: visible; float: none; position: static does not establish a BFC.
2. Conversely, an inline-block is an example of a box that establishes a BFC, but is itself inline-level, not block-level.

In a similar vein, how does this translate to inline elements and elements that form an inline formatting context?

An inline box is an inline-level box whose contents participate directly in its parent's inline formatting context (see section 9.4.2). Notably, the only boxes that can establish inline formatting contexts are block container boxes.

The difference between an inline box and an inline-block is that an inline-block's contents participate in the BFC that it establishes, not in the parent's IFC. Instead, only the inline-block itself participates in its parent's IFC.

这篇关于块级元素vs块格式化上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！