CSS求值过程
IFC、BFC详解
FC的全称是：
Formatting Contexts，译作格式化上下文，是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
- 比较常见的是 CSS2.1 规范中的 IFC、BFC、GFC以及 FFC
Box（盒模型）
一个网页可以说是由很多个盒子组成的、元素的类型和 display 属性决定了 Box 的类型
- block-level Box：当元素的 CSS 属性 display 为 block, list-item 或 table 时，它是块级元素 block-level 。块级元素（比如
)视觉上呈现为块，竖直排列。 每个块级元素至少生成一个块级盒（block-level Box）参与 BFC ，称为主要块级盒一些元素，比如
- ，生成额外的盒来放置项目符号，不过多数元素只生成一个主要块级盒。
- Inline-level Box：当元素的 CSS 属性 display 的计算值为 inline, inline-block 或 inline-table 时，称它为行内级元素。视觉上它将内容与其它行内级元素排列为多行。典型的如段落内容，有文本或图片，都是行内级元素。 行内级元素生成行内级盒
块容器盒
只包含其它块级盒，或生成一个行内格式化上下文(inline formatting context)，只包含行内盒的叫做块容器盒子。也就是说，块容器盒要么只包含行内级盒，要么只包含块级盒
块盒
同时是块容器盒的块级盒称为块盒(block boxes)
行盒
行盒由行内格式化上下文(inline formatting context)产生的盒，用于表示一行。在块盒里面，行盒从块盒一边排版到另一边。 当有浮动时, 行盒从左浮动的最右边排版到右浮动的最左边
IFC
- 块级元素中仅包含内联级别元素就触发IFC
IFC布局规则
- 在一个IFC内，子元素是水平方向横向排列的，并且垂直方向起点为元素顶部。
- 子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。 在垂直方向上，子元素会以不同形式来对齐（vertical-align）
- 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
- IFC中的line box一般左右边贴紧其包含块，但float元素会优先排列。
BFC
BFC触发条件
- 根元素或其它包含它的元素
- 浮动 float: left/right/inherit
- 绝对定位元素 position: absolute/fixed
- 行内块display: inline-block 表格单元格
- display: table-cell 表格标题
- display: table-caption 溢出元素
- overflow: hidden/scroll/auto/inherit
- 弹性盒子 display: flex/inline-flex
BFC布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
Grid布局
网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了
基本概念
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）
<div> <span>a</span> <span>b</span> <span>c</span></div>
上面代码中，最外层的<div>元素就是容器，内层的三个<span>元素就是item
注意：项目只能是容器的顶层子元素，不包含item的子元素
