框何时建立内联格式化上下文?

azt*_*ack 4 css

我读到在某些情况下从MDN创建块格式化上下文:块格式化上下文.

我想知道盒子何时建立内联格式化上下文?

我知道的一个案例是:当一个块容器盒只包含内联级别的盒子时.

Mar*_*det 10

为了回答你的问题,我重读了CSS 2.1规范的第9.2.1节.

根据我的阅读,您有了答案:当块容器框仅包含内联元素时,将触发内联格式化上下文.

与可以显式触发的块格式化上下文(例如,设置overflow: hidden为块级元素)相比,无法显式触发内联格式化上下文.

内联格式化上下文似乎始终作为"主要块级别框"内的后代块框存在,并且这些后代块框可以是匿名的.

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

块级元素(例如a <div>)履行两个职责:一个是定位,另一个是内容格式化.

处理定位时,块级元素充当"块级框".

处理格式化时,块级元素充当"块容器盒".

作为"块级框",块元素根据position属性指定的定位类型(静态,绝对,相对,固定)进行操作.

作为"块容器盒",如果块元素具有至少一个子块级元素,则块元素建立块格式化上下文.如果所有子元素都是内联级别框,则建立内联格式化上下文.

如果"块容器盒"包含文本和块元素,则将文本视为包含在一个或多个匿名块级框中,并建立块格式化上下文.

除了
CSS规范并不完全轻松阅读.我已多次重读第9章和第10章,我还没有提出一个简单的英文翻译.

  • 是的; 举例说明:给定 `&lt;div&gt;text&lt;/div&gt;`,1) `div` 块框仅包含内联内容,因此它为文本创建内联格式化上下文,2) 文本本身驻留在匿名内联中参与此内联格式化上下文的框。 (3认同)
  • 并且给定`<div>内联<p>块</ div>`,1)`div`块框包含内联内容以及`p`块框,因此它会为内联内容创建一个匿名块框`p`和2)这个匿名块框为文本创建内联格式化内容.这意味着内联内容驻留在一个匿名内联框中,该框嵌套在一个匿名块框中,该框是`div`的第一个子框,也是`p`的兄弟. (2认同)