为什么内联级别框不按照块格式上下文规则进行布局,尽管它在其中



我正在努力理解格式化上下文与内部和外部显示类型之间的关系。

一方面,W3和相关网站的官方解释说,所有框都有一个格式化上下文。它们要么创建一个,要么继续其父对象的一个,父对象也创建了一个格式化上下文,或者继续其父对象之一,以此类推,直到HTML元素建立的初始块格式化上下文。

块格式上下文中的元素是根据块格式上下文规则进行布局的。这意味着,当您在另一个div中插入一个div时,子div将根据块格式化上下文规则进行布局,因为它的父div有块格式化上下文。

那么,为什么带有display:inline或inline-flex的元素不按照块格式上下文规则进行布局呢?

解释指出,内部显示类型定义了格式化上下文,该上下文决定了元素的布局方式。外部显示类型规定了原理框如何参与流布局。

最后一个解释让我很困惑,因为元素在容器中的参与方式不是由该容器的格式化上下文决定的吗?

当您将div的显示类型设置为";"flex";,该元素在其内部创建了一个flex格式上下文,然而,在外部,它仍然根据块格式上下文规则行事,因为它在其中,这是不对的吗?那么,为什么内联元素或显示内联flex的元素没有发生同样的事情呢?为什么它们的外部显示类型在内部时不被阻挡?

如果更改显示属性会更改元素内部的格式上下文,而其外部行为由its父级的格式上下文决定,那么为什么在块格式上下文中,内联元素和内联flex元素以及可能的其他元素也没有根据块规则进行布局呢?

那么,在块格式化上下文中,为什么内联元素和内联flex元素以及可能的其他元素都没有根据块规则进行布局呢?

您丢失了一小块被称为匿名区块框的拼图

换句话说:如果一个块容器框(例如为上面的DIV生成的(里面有一个块级框(例如上面的p(,那么我们强制它里面只有块级框。

为了在块格式化上下文中只强制使用块级框,我们将内联元素(或内联块元素(放入匿名块框中。然后,该匿名框将在其内部为内联元素创建一个内联格式上下文。

考虑到这一点,你所描述的所有规则都是准确的。

最新更新