什么是格式化上下文(formatting contexts
)
Formatting context
是W3C CSS2.1
规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系、相互作用。
格式化上下文指的是初始化元素定义的环境。包含两个要点,元素定义的环境和初始化。
在 CSS
中,元素定义的环境有两种,一种是块格式化上下文( Block formatting context
),另一种是行内格式化上下文( Inline formatting context
)。 这两种上下文定义了在 CSS
中元素所处的环境,格式化则表明了在这个环境中,元素处于此环境中应当被初始化,即元素在此环境中应当如何布局等。
格式化上下文包含以下几种情况
a:块级格式化上下文( Block formatting contexts
)( BFC )
b:行内格式化上下文( Inline formatting contexts
) ( IFC )
c:自适应格式化上下文( Flex Formatting Contexts
)( FFC )(CSS3新增)
d:网格布局格式化上下文( GridLayout Formatting Contexts
)( GFC )(CSS3新增)
BOX
:CSS布局的基本单位
Box
是 CSS
布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box
组成的。元素的类型和 display
属性,决定了这个 Box
的类型。 不同类型的 Box
, 会参与不同的 Formatting Context
(一个决定如何渲染文档的容器),因此Box
内的元素会以不同的方式渲染。让我们看看有哪些盒子:
a:block-level box:display
属性为 block, list-item, table
的元素,会生成 block-level box
。并且参与 block fomatting context
;
c:inline-level box:display 属性为 inline, inline-block, inline-table
的元素,会生成 inline-level box
。并且参与 inline formatting context
;