1. 流式(flow)布局
   1. 基础规则
      1. 按照先后位置从上而下布局
      2. 行内元素水平排列，知道当行被沾满，然后被换行
      3. 块级元素自动占据完整的新行
2. FC
   1. 视觉格式化模型
   2. 含义
      1. 独立的区域
      2. 固定的渲染规则
         1. 决定子元素如何定位
         2. 决定和其它元素的互相作用
   3. 分类
      1. IFC
         1. Inline Formatting Contexts
         2. 生成时机
            1. 在块级元素中，近包含内联级别元素时
         3. 规则
            1. 内部的盒子，在水平方向，一个接一个的放置
            2. 在水平方向上，盒子的padding、border、margin所占据的空间都会被考虑在内
            3. 垂直方向上，可能以不同的形式来对齐(vertical-align)
            4. inline-box的高度由行高计算规则确定
            5. 当inline-box内的元素超过宽度时，会被分割成多个inline-box。
            6. 设置不被分割
            7. work-breaking
            8. white-space: nowrap | pre
      2. BFC
         1. Block Formatting Contexts
         2. 定义
            1. 块级盒子作用域，是独立的容器和布局环境
         3. 通俗解释
            1. 封闭的大箱子，无论内部如何变化，都不会影响到外部
         4. 生成时机
            1. body（根）元素
            2. display: inline-block | flex
            3. overflow值不为visible
            4. position: absolute | fixed
            5. float值不为none
         5. 规则
      3. FFC
         1. Flex Formatting Contexts
         2. 创建
            1. display: flex | inline-flex
      4. GFC
         1. GridLayout Formatting Contexts
         2. 创建
            1. display: grid
         3. 更精细的渲染语义和控制
3. Box(盒模型)
   1. CSS布局的对象和基本单位
   2. Box类型
      1. block-level Box
      2. inline-level Box
         1. inline-box
            1. 看不见、摸不着的边框
      3. flex Container
      4. grid container
4. 基础概念
   1. display
      1. inline
      2. block
5. Flex
   1. 属性
      1. 容器属性
         1. align-items
            1. 相对主轴布局
            2. 常用值
            3. center
         2. align-content
            1. 适用于multi-line flex container
         3. justify-content
            1. 相对交叉轴布局
            2. 常用值
            3. center
         4. flex-direction
         5. flex-wrap
            1. 指定flex元素单行或多行显示
            2. 值
            3. nowrap (默认值)
            4. 单行显示
            5. nowrap: 禁止文字自动换行
            6. wrap
            7. 多行显示
      2. 元素属性
         1. align-self
         2. flex-basic
            1. 和宽度的关系
            2. flex-basis > width > 内容宽度
      3. flex
         1. 全写
            1. 1. flex-grow
            2. 2. flex-shrink
            3. 3. flex-basis
         2. 基础值
            1. initial
            2. 解释
            3. 根据自身宽高确定尺寸
            4. 自行伸长以吸收flex容器中额外的自由空间
            5. 等价
            6. flex: 0 1 auto
            7. auto
            8. 解释
            9. 也会缩短至自身最小尺寸以适应容器
            10. 等价
            11. flex: 1 1 auto
            12. none
            13. 解释
            14. 根据自身宽高来设置尺寸
            15. 完全非弹性
            16. 不会缩短、也不会伸长使用flex容器
            17. 等价
            18. flex: 0 0 auto
            19. positive-number
            20. 解释
            21. 在自由空间中的占比
            22. 等价
            23. flex: <positive-number> 1 0
6. 附加知识
   1. auto的含义
      1. 自动占据剩余空间
7. 参考文章
   1. 小科普：到底什么是 BFC、IFC、GFC 和 FFC
      1. https://juejin.im/entry/5938daf7a0bb9f006b2295db
   2. IFC、BFC、GFC 与 FFC 知多少
      1. https://github.com/chokcoco/iCSS/issues/5
   3. [翻译]Flex Basis与Width的区别
      1. https://www.jianshu.com/p/17b1b445ecd4
8. 普通流 normal flow
   1. 按照先后位置从上而下布局
      1. 行内元素水平排列，直到当行被沾满然后换行
      2. 块级元素则会被渲染为完整的新行
      3. 所有元素都是普通流定位
   2. BFC
      1. Block Formatting Context
      2. 定义
         1. 是区域：布局过程中生成块级盒子的区域，独立的容器和布局环境
         2. 有规则：浮动元素与其他元素的交互限定区域
      3. 通俗来讲
         1. BFC是一个封闭的大箱子，内部无论如何变化，都不会影响到外部
      4. 创建
         1. 根元素 body
         2. overflow 值不为 visible 的块元素
         3. 浮动元素 float不为none
         4. 绝对定位元素
            1. position为absolute和fixed
         5. 行内块元素
            1. inline-block
         6. 弹性元素
         7. 网格元素
      5. 规则
         1. 继承了普通流的定位规则
         2. 容器里的子元素不会影响到外面的元素
         3. BFC的高度包含了内部的浮动元素
         4. BFC区域不会与外部的浮动元素重叠
         5. 垂直方向的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
      6. 应用
         1. 外边距折叠（Margin collapsing）
            1. 有的译成外边距塌陷
            2. 规范
            3. 相邻盒子(可以是兄弟或祖先关系？)的外边距可以结合成一个单独的外边距
            4. 发生情况
            5. 属于同一个BFC的块级元素
            6. 在normal flow的布局中
            7. 也就是说绝对定位元素和浮动元素不会发生折叠
            8. 块级盒子
            9. 也就是说inline-block不会发生折叠
            10. 也就是说水平方向不会发生折叠
            11. 垂直方向相邻
            12. 解决
            13. 放在两BFC中
         2. BFC可以包含浮动的元素
            1. 场景描述
            2. 一个block元素中，包含一个浮动元素，此时block元素会失去高度
            3. 解决
            4. 为block元素加入overflow:hidden属性，触发BFC
            5. 那么容器就回包裹着元素
         3. 阻止被浮动元素覆盖
         4. 两列布局