BFC、IFC、GFC、FFC格式化上下文

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、经验

一、盒模型

1、组成

• content box： 必备
• padding box： 可选
• border box： 可选
• margin box： 可选
  

2、IE怪异模式和标准盒模型的区别

• IE怪异模式
  
• 标准盒模型
  

3、box-sizing属性

IE8 开始支持CSS3属性 box-sizing， 让我们可以自由选择采用哪种盒模型，属性值：

• content-box——默认值， 采用 Standard box model
• border-box——采用 IE box model
• inherit——继承父元素属性值

二、FC

Formatting Contexts， 是W3C CSS2.1规范中的一个概念。 它是页面中的一块渲染区域， 并且有一套渲染规则， 它决定了其子元素将如何定位， 以及和其他元素的关系和相互作用。

1、BFC 块级格式化上下文

BFC布局规则

• 内部的盒子会在垂直方向， 一个个地放置；
• 盒子垂直方向的距离由margin决定， 属于同一个BFC的两个相邻Box的上下margin会发生重叠；
• 每个元素的左边， 与包含的盒子的左边相接触， 即使存在浮动也是如此；
• BFC的区域不会与float重叠；
• BFC就是页面上的一个隔离的独立容器， 容器里面的子元素不会影响到外面的元素， 反之也如此；
• 计算BFC的高度时， 浮动元素也参与计算（如overflow: hidden）。

产生 BFC 的方式：

• 根元素（html、body）；
• float 的属性不为 none；
• position 为 absolute 或 fixed；
• display 为 inline-block， table-cell， table-caption， flex；
• overflow 不为 visible

2、IFC 行内格式化上下文

• IFC 的 line box（线框） 高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin影响)
• IFC 中的 line box 一般左右都贴紧整个IFC， 但是会因为float元素而扰乱。 float元素会位于IFC与与line box之间， 使得line box 宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中是不可能有块级元素的， 当插入块级元素时（如p中插入div） 会产生两个匿名块与div分隔开，即产生两个IFC， 每个IFC对外表现为块级元素， 与div垂直排列。
• 水平居中： 当一个块要在环境中水平居中时， 设置其为 inline-block 则会在外层产生IFC， 通过 text-align 则可以使其水平居中。
• 垂直居中： 创建一个 IFC， 用其中一个元素撑开父元素的高度， 然后设置其verticalalign:middle， 其他行内元素则可以在此父元素下垂直居中。

3、GFC 网格布局格式化上下文

• GridLayout Formatting Contexts， 当为一个元素设置 display 值为 grid 的时候， 此元素将会获得一个独立的渲染区域， 我们可以通过在网格容器上定义网格定义行和网格定义列属性在网格项目上定义网格行和网格列为每一个网格项目定义位置和空间。
• 那么GFC有什么用呢， 和 table又有什么区别呢？ 首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列， 控制对齐以及更为精细的渲染语义和控制。

4、FFC 自适应格式化上下文

• Flex Formatting Contexts， display值为 flex 或者 inline-flex 的元素将会生成自适应容器， 多用于移动端。
• Flex Box 由伸缩容器和伸缩项目组成。 通过设置元素的 display 属性为 flex 或inline-flex 可以得到一个伸缩容器。 设置为 flex 的容器被渲染为一个块级元素， 而设置为 inline-flex 的容器则渲染为一个行内元素。
• 伸缩容器中的每一个子元素都是一个伸缩项目。 伸缩项目可以是任意数量的。 伸缩容器外和伸缩项目内的一切元素都不受影响。 简单地说， Flexbox 定义了伸缩容器内伸缩项目该如何布局。

三、重构和重绘

• 回流（Reflow） ： render tree 中的一部分(或全部)因为元素的规模尺寸， 布局， 隐藏等改变而需要重新构建。 回流的时候， 浏览器会使渲染树中受到影响的部分失效， 并重新构造这部分渲染树， 完成回流后， 浏览器会重新绘制受影响的部分到屏幕中， 该过程称为重绘。
• 重绘： render tree 中的一些元素需要更新属性， 而这些属性只是影响元素的外观， 风格， 而不会影响 render 树重新布局的， 比如修改字体颜色。

区别：

• 回流必将引起重绘， 而重绘不一定会引起回流。 比如： 只有颜色改变的时候就只会发生重绘而不会引起回流。
• 当页面布局和几何属性改变时就需要回流， 比如： 添加或者删除可见的DOM元素， 元素位置改变，元素尺寸改变——边距、 填充、 边框、 宽度和高度， 内容改变。

注：
重绘：浏览器做的工作比较少
重构（回流）：浏览器刷新次数增加，加载时间不断地增加