格式化上下文formatting contexts

本是古典何须时尚 2021-06-26 16:06 463阅读 0赞

## 什么是格式化上下文（`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`；