Flex 布局，可以简便、完整、响应式地实现各种页面布局。Flex 布局将成为未来布局的首选方案。

1. 前端布局方案主要有三种：

• 传统布局方案（借助浮动、定位等手段）
• flex布局方案
• grid布局方案

2. IE盒模型和W3C盒模型的区别：

IE盒模型宽高计算的是border-box，W3C盒模型计算的是content-box。

盒模型选择：默认(W3C)优于配置，如果非要用IE盒模型，注意引用的外部组件是否发生错误。

在封装组件时，记得强声明box-sizing，哪怕你使用默认的content-box。

3. 元素的分类及其布局特性

block-level（块级）元素、inline-level（行内级）元素和inline-block-level（行内块级）元素。

块级元素：display属性取block、table、flex、grid和list-item等值的独占一行显示的元素。

行内级元素：display属性取inline值的可在同一行内排列显示的元素。

行内块级元素：display属性取inline-block、inline-table、inline-flex和inline-grid等值的兼具块级元素和行内级元素布局特性的元素。（特性为行内级元素+可以设置任何尺寸属性（但width默认为0））

4. 格式化上下文

格式化上下文，它指的是具有某种CSS格式化规则（布局规则）的上下文环境，在这个上下文环境内的所有子元素，都将根据其特定的CSS格式化规则来进行排列。

常见的格式化上下文有BFC（CSS2.1 规范）、IFC（CSS2.1 规范）、 FFC（CSS3规范新增）和GFC（CSS3规范新增）。

BFC, 全称是block formatting context，它是一个独立封闭的渲染区域，在这个区域内的所有元素，从区域的顶部起，一个接一个地根据自身的布局特性进行排列：在这个区域内的块级元素 ，按从上到下的顺序显示，相邻的块级元素可以使用margin隔离，但在垂直方向上相邻的块级元素会发生margin合并；在这个区域内的inline-level或inline-level-block元素，则按从左到右的顺序显示。

触发条件：

只要元素满足下面任一条件即可触发 BFC 特性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

IFC, 全称是inline formatting context，其内部的元素，在水平方向上，一个接一个地显示；在垂直方向上，每个元素可以设置不同的对齐方式；IFC内部的元素，被一行行的矩形框所包含，这些虚拟的矩形框，我们称为行框（line box）。

FFC（flex formatting context）和GFC（grid formatting context），分别是flex布局和grid布局的内容。

5. 包含块

我们在设置元素尺寸属性（width、height、padding、margin和border）的百分比值或偏移属性（top、right、bottom和left）的值时，通常会有一个“相对参考系”，这个就是包含块。

• static和relative定位元素的包含块，为其块级祖先元素（通常是块级父元素）的content box；
• absolute定位元素的包含块，为最近的非静态定位祖先元素的padding box，查无非静态定位祖先元素，那么它的包含块是ICB（即根元素的包含块，也称为初始包含块）；
• fix定位元素的包含块，为当前viewport（视窗）；

详细细节看文章，很详细。

HTTP Cookie（也叫Web Cookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

OAuth是一个关于授权（authorization）的开放网络标准，在全世界得到广泛应用，目前的版本是2.0版。

每个浏览器都自带了 HTTP 缓存实现功能。 您只需要确保每个服务器响应都提供正确的 HTTP 标头指令，以指示浏览器何时可以缓存响应以及可以缓存多久。

了解各种模块化规范

个人认为没有历史包袱的话，用webpack实现模块化是最好的选择。

高质量的源码解读，带教学视频。