from 从输入 URL 到页面加载的过程？如何由一道题完善自己的前端知识体系！

作为进阶回头再来看看：从输入 URL 到页面加载完成的过程中都发生了什么事情？

这一篇基本是 copy 下来的，对于这部分 css 不打算投入太多去看

CSS 的可视化格式模型

CSS 中规定每一个元素都有自己的盒子模型（相当于规定了这个元素如何显示）
然后可视化格式模型则是把这些盒子按照规则摆放到页面上，也就是如何布局
换句话说，盒子模型规定了怎么在页面里摆放盒子，盒子的相互作用等等

总结一句话：CSS 的可视化格式模型就是规定了浏览器在页面中如何处理文档树

包含块（Containing Block）

一个元素的 box 的定位和尺寸，会与某一矩形框有关，这个框就称之为包含块。

元素会为它的子孙元素创建包含块，但是，并不是说元素的包含块就是它的父元素，元素的包含块与它的祖先元素的样式等有关系

根元素是最顶端的元素，它没有父节点，它的包含块就是初始包含块
static 和 relative 的包含块由它最近的块级、单元格或者行内块祖先元素的内容框（content）创建
fixed 的包含块是当前可视窗口
absolute 的包含块由它最近的 position 属性为 absolute、relative 或者 fixed 的祖先元素创建
如果其祖先元素是行内元素，则包含块取决于其祖先元素的 direction 特性
如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素的内边距边界

控制框（Controlling Box）

块级元素和块框以及行内元素和行框的相关概念

块框:

块级元素会生成一个块框（Block Box），块框会占据一整行，用来包含子 box 和生成的内容
块框同时也是一个块包含框（Containing Box），里面要么只包含块框，要么只包含行内框（不能混杂），如果块框内部有块级元素也有行内元素，那么行内元素会被匿名块框包围

关于匿名块框的生成，示例：

<div>
  Some text
  <p>More text</p>
</div>

div 生成了一个块框，包含了另一个块框 p 以及文本内容 Some text，此时 Some text 文本会被强制加到一个匿名的块框里面，被 div 生成的块框包含（其实这个就是 IFC 中提到的行框，包含这些行内框的这一行匿名块形成的框，行框和行内框不同）

换句话说:

如果一个块框在其中包含另外一个块框，那么我们强迫它只能包含块框，因此其它文本内容生成出来的都是匿名块框（而不是匿名行内框）

行内框：

一个行内元素生成一个行内框
行内元素能排在一行，允许左右有其它元素

关于匿名行内框的生成，示例：

<p>Some <em>emphasized</em> text</p>

P 元素生成一个块框，其中有几个行内框（如 EM），以及文本 Some ， text，此时会专门为这些文本生成匿名行内框

display 属性的影响

display 的几个属性也可以影响不同框的生成：

block，元素生成一个块框
inline，元素产生一个或多个的行内框
inline-block，元素产生一个行内级块框，行内块框的内部会被当作块块来格式化，而此元素本身会被当作行内级框来格式化（这也是为什么会产生 BFC）
none，不生成框，不再格式化结构中，当然了，另一个 visibility: hidden 则会产生一个不可见的框

总结

如果一个框里，有一个块级元素，那么这个框里的内容都会被当作块框来进行格式化，因为只要出现了块级元素，就会将里面的内容分块几块，每一块独占一行（出现行内可以用匿名块框解决）
如果一个框里，没有任何块级元素，那么这个框里的内容会被当成行内框来格式化，因为里面的内容是按照顺序成行的排列

BFC（Block Formatting Context）

FC（格式上下文）？

FC 即格式上下文，它定义框内部的元素渲染规则，比较抽象，譬如

FC 像是一个大箱子，里面装有很多元素
箱子可以隔开里面的元素和外面的元素（所以外部并不会影响 FC 内部的渲染）
内部的规则可以是：如何定位，宽高计算，margin 折叠等等

不同类型的框参与的 FC 类型不同，譬如块级框对应 BFC，行内框对应 IFC

注意，并不是说所有的框都会产生 FC，而是符合特定条件才会产生，只有产生了对应的 FC 后才会应用对应渲染规则

BFC 规则：

在块格式化上下文中
每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）
即使存在浮动也是如此（所以浮动元素正常会直接贴近它的包含块的左边，与普通元素重合）
除非这个元素也创建了一个新的 BFC

总结几点 BFC 特点

内部 box 在垂直方向，一个接一个的放置
box 的垂直方向由 margin 决定，属于同一个 BFC 的两个 box 间的 margin 会重叠
BFC 区域不会与 float box 重叠（可用于排版)
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
计算 BFC 的高度时，浮动元素也参与计算（不会浮动坍塌）

如何触发 BFC？

根元素
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block, flex, inline-flex，table，table-cell，table-caption
overflow 不为 visible

这里提下，display: table，它本身不产生 BFC，但是它会产生匿名框（包含 display: table-cell 的框），而这个匿名框产生 BFC

IFC（Inline Formatting Context）

IFC 即行内框产生的格式上下文

IFC 规则

在行内格式化上下文中
框一个接一个地水平排列，起点是包含块的顶部。
水平方向上的 margin，border 和 padding 在框之间得到保留
框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐

行框

包含那些框的长方形区域，会形成一行，叫做行框 -行框的宽度由它的包含块和其中的浮动元素决定，高度的确定由行高度计算规则决定

行框的规则：

如果几个行内框在水平方向无法放入一个行框内，它们可以分配在两个或多个垂直堆叠的行框中（即行内框的分割）
行框在堆叠时没有垂直方向上的分割且永不重叠
行框的高度总是足够容纳所包含的所有框。不过，它可能高于它包含的最高的框（例如，框对齐会引起基线对齐）
行框的左边接触到其包含块的左边，右边接触到其包含块的右边。

结合补充下 IFC 规则：

浮动元素可能会处于包含块边缘和行框边缘之间
尽管在相同的行内格式化上下文中的行框通常拥有相同的宽度（包含块的宽度），它们可能会因浮动元素缩短了可用宽度，而在宽度上发生变化
同一行内格式化上下文中的行框通常高度不一样（如，一行包含了一个高的图形，而其它行只包含文本）
当一行中行内框宽度的总和小于包含它们的行框的宽，它们在水平方向上的对齐，取决于 text-align 特性
空的行内框应该被忽略，即不包含文本，保留空白符，margin/padding/border 非 0 的行内元素，以及其他常规流中的内容(比如，图片，inline blocks 和 inline tables)，并且不是以换行结束的行框，必须被当作零高度行框对待

总结：

行内元素总是会应用 IFC 渲染规则
行内元素会应用 IFC 规则渲染，譬如 text-align 可以用来居中等
块框内部，对于文本这类的匿名元素，会产生匿名行框包围，而行框内部就应用 IFC 渲染规则
行内框内部，对于那些行内元素，一样应用 IFC 渲染规则
另外，inline-block，会在元素外层产生 IFC（所以这个元素是可以通过 text-align 水平居中的），当然，它内部则按照 BFC 规则渲染

相比 BFC 规则来说，IFC 可能更加抽象（因为没有那么条理清晰的规则和触发条件）

但总的来说，它就是行内元素自身如何显示以及在框内如何摆放的渲染规则，这样描述应该更容易理解

从输入URL到页面加载的过程（8） - CSS的可视化格式模型