什么时候一个框建立一个内联格式化上下文？ [英] When does a box establish an inline formatting context?

问题描述

我读到在某些情况下，从 MDN创建块格式化上下文：阻止格式化上下文。

我不知道框何时建立了一个内联格式化上下文？

解决方案

为了回答你的问题，我的一个案例我知道是：当一个块容器框只包含内联级框重读 CSS 2.1规范的第9.2.1节。 / p>

根据我的阅读，你有答案：当块容器框只包含内联元素时，触发内联格式化上下文。

与可以显式触发的块格式化上下文（例如，将 overflow：hidden 设置为块级元素），内联格式化上下文不能被显式地触发。

内联格式化上下文似乎总是作为主体块级框 ，并且这些后代块框可以是匿名的。

我提供以下描述作为理解块/内联格式化上下文的心理模型。

一个块级元素（例如< div> ）完成两个职责：一个定位，两个内容格式化。

在处理定位时，块级元素用作块级框。

格式化，块级元素充当块容器框。

作为块级框，块元素根据类型由 position 属性指定的定位（静态，绝对，相对，固定）。

容器框，如果块元素具有至少一个子块级元素，则块元素建立块格式化上下文。如果所有子元素都是内联级框，则建立内联格式化上下文。

如果块容器框包含文本和块元素，文本被视为包含在一个或多个匿名块级框中，并且建立了块格式化上下文。

Aside

CSS规范不完全是轻的读数。我已经重读了第9章和第10章，我还没有想出一个简单的英语翻译。

I read that a block formatting context is created in some cases from MDN:Block formatting context.

I wonder when does a box establish an inline formatting context?

One case I know is: when a block container box contains only inline-level boxes.

解决方案

To answer your question, I reread Section 9.2.1 of the CSS 2.1 spec.

Based on my reading, you have your answer: the inline formatting context is triggered when a block container box contains only inline elements.

In contrast to a block formatting context that can be triggered explicitly (for example, setting overflow: hidden to a block-level element), an inline formatting context cannot be triggered explicitly.

Inline formatting contexts appear to always exist as descendant block boxes within a "principal block-level box", and these descendant block boxes may be anonymous.

I offer the following description as a mental model for understanding block/inline formatting contexts.

A block-level element (e.g. a <div>) fulfills two responsibilities: one, positioning, and two, content formatting.

When dealing with positioning, a block-level element acts as a "block-level box".

When dealing with formatting, a block-level element acts as a "block container box".

Acting as a "block-level box", the block-element behaves according to the type of positioning (static, absolute, relative, fixed) specified by the position property.

Acting as a "block container box", the block-element establishes a block-formatting context if the block-element has at least one child block-level element. If all the child elements are inline-level boxes, then an inline-formatting context is established.

If the "block container box" contains text and block elements, then the text is treated as being contained in one or more anonymous block-level boxes, and a block-formatting context is established.

Aside
The CSS spec is not exactly light reading. I have reread Chapters 9 and 10 several times and I have yet to come up with a plain-English translation.

这篇关于什么时候一个框建立一个内联格式化上下文？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！