前端问题总结
js重难点
Javascript是弱类型语言，单线程
淡入淡出轮播图时，在变化前吧当前的下标记录下来
Https的默认端口号是443
http的默认端口号是80/8080
1.多行文本省略号的设置
span{
520px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
-
前端开发
-
--save -dev 开发依赖
ES5新增的方法
1.let定义的变量只在代码块中有效（块级作用域）
2.let声明的变量不会提前(前置)
3.在同一个作用域中不能声明同名的变量
一、let和var的区别
1、let声明的变量是块级作用域（所在花括号里），var是函数作用域和全局作用域
注意：let是可以定义全局变量，局部变量，块级作用域的变量。（和写代码的位置有关）
2、let声明的变量不会声明提升，var会声明提升
3、从代码的写法上，let不能声明同名的变量，var可以。
4.用const来修饰一个变量，就意味着该变量里的数据只能被访问，而不能被修改，也就是意味着const“只读”（readonly）
5.const修饰的是直接指向(修饰)的内存
引用类型有两块内存区域
引用类型代表的是保存地址的内存区域，数组元素表示的是数据
二、=>函数
x=>x*5相当于function（x）{ return x*5 }
调用:
let temp=(x=>x*5)(8)；
console.log(temp);
三、什么是ajax和json，它们的优缺点？
JSON.parse(); 将字符串转换为json对象
JSON.stringify(); 将json转换为字符串
四、ajax
全称：Asynchronous Javascript And XML 异步传输+js+xml。
注：所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
let xhr = new XMLHttpRequest();
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
xhr.open("get","news.php?pageIndex="+pageIndex,true);
(3)设置响应HTTP请求状态变化的函数
xhr.onreadystatechange=function(){};
(4)发送HTTP请求
xhr.send();
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新
注：如果是post方式，必须设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
五、Js面向对象的几种方式
（1）、对象的字面量 var obj = {}
（2）、创建实例对象 var obj = new Object();
（3）、构造函数模式 function fn(){} , new fn();
（4）、工厂模式：用一个函数，通过传递参数返回对象。function fn(params){var obj =new Object();obj.params = params; return obj;},fn(params);
（5）、原型模式：function clock(hour){} fn.prototype.hour = 0; new clock();
首先，每个函数都有一个prototype(原型)属性，这个指针指向的就是clock.prototype对象。而这个原型对象在默认的时候有一个属性constructor，指向clock，这个属性可读可写。而当我们在实例化一个对象的时候，实例newClock除了具有构造函数定义的属性和方法外（注意，只是构造函数中的）,还有一个指向构造函数的原型的指针，ECMAScript管他叫[[prototype]]，这样实例化对象的时候，原型对象的方法并没有在某个具体的实例中，因为原型没有被实例
六、Html5中本地存储概念是什么，有什么优点
cookie(会话跟踪技术)是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
七、ECMAscript6的新特性
1.增加块作用域
2.增加let const
3.解构赋值
let [v1,[v2,v3],[v4,v5]] = [12,[23,34],[56,67],[5,6]]；
console.log(v1);
console.log(v2);
console.log(v3);
console.log(v4);
console.log(v5);
let {name,age} = {name:"dahuang",age:18};
console.log(name,age)
4.函数参数扩展 （函数参数可以使用默认值、不定参数以及拓展参数）
5.增加class类的支持
6.增加箭头函数
7.增加模块和模块加载（ES6中开始支持原生模块化）
注：以前写的js代码，靠HTML引用需要考虑顺序问题
模块化
①就是把不同类型的功能分类放在不同的js里
//ES6的模块
a：定义模块（写一个js模块），用export导出（导出的对象和函数等）才能被外部使用
b：引用模块，import
8.math, number, string, array, object增加新的API
七、面向对象是设计思想
1.面向对象的三大特性：封装、继承、多态
辩证法：
1.类是摸板、没有类就没有对象
2.对象是依据类而产生、对象的属性的值的改变，引起对象的改变，但是影响不到类（非生物界）
ooA：面向对象的分析
ooD：面向对象的设计
ooP：面向对象的编程
1. javascript的typeof返回哪些数据类型.
答案：string,boolean,number,undefined,function,object
2. 例举3种强制类型转换和2种隐式类型转换?
答案：强制（parseInt,parseFloat,number）
隐式（== ===）
3. split() join() 的区别
答案：前者是将字符串切割成数组的形式，后者是将数组转换成字符串
4. 数组方法pop() push() unshift() shift()
答案：push()尾部添加 pop()尾部删除
unshift()头部添加 shift()头部删除
5. IE和标准下有哪些兼容性的写法
答案：
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
6. ajax请求的时候get 和post方式的区别
答案：
一个在url后面 ，一个放在虚拟载体里面
get有大小限制(只能提交少量参数)
安全问题
应用不同 ，请求数据和提交数据
7. call和apply的区别
答案：
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
call与aplly的异同：
1,第一个参数this都一样,指当前对象
2,第二个参数不一样：call的是一个个的参数列表；apply的是一个数组（arguments也可以）
call和apply能够调用函数，也能够改变函数内部的this
call和apply继承的缺点
只能继承父类的构造函数
实例化子对象时，属于父对象的属性，没法传值。
8. ajax请求时，如何解析json数据
答案：使用JSON.parse
9. 事件委托是什么
答案: 利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
注：Jquery中的on，bind，live，delegate的区别：
bind:能够完成基本的绑定事件处理函数的功能，比起click(),mouseover()等的好处是，可以一次绑定多种事件类型
live:有事件委托，把事件处理函数委托给DOM根元素，效率比delegate低，所以新版jQuery去掉了live。
delegate:有事件委托，把事件处理函数委托给指定的祖先元素，delegate比live的执行效率高，灵活
on:涵盖了以上所有的功能(基本事件绑定和事件委托)。
10. 闭包是什么，有什么特性，对页面有什么影响
答案：闭包就是能够读取其他函数内部变量的函数,使得函数不被GC回收，如果过多使用闭包，容易导致内存泄露
11. 如何阻止事件冒泡
答案：ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();
12. 如何阻止默认事件
答案：(1)return false；(2) ev.preventDefault();
八、CDN加速服务
CDN的全称是Content Delivery Network，即内容分发网络。
CDN加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、css等文件。
CDN加速需要依靠各个网络节点，例如100台CDN服务器分布在全国范围，从上海访问，会从最近的节点返回资源，这是核心。
CDN服务器通过缓存或者主动抓取主服务器的内容来实现资源储备。
九、localStorage
HTML5的对象(window对象的属性)
这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
1）纯粹的浏览器端保存数据不会在每次请求时都带着。节约了网络流量
2）localStorage提供了现成的函数来保存和获取数据
3）localStorage没有失效日期，即永久保存
localStorage和cookie的对比
//保存数据
//localStorage.setItem(键，值);
//获取数据
//localStorage.getItem(键);
//删除数据
//localStorage.removeItem(键);
cookie的作用
1)、cookie是浏览器端本地存储数据（设置失效时间后，是保存在硬盘里的）
2)、cookie和后端的session结合起来，识别用户的身份（客户端的身份），服务器端会产生一个sessionId,来唯一区分一个客户端，sessionId在每次请求和响应时都会带着，包括带着所有cookie保存的数据
注：http协议是无状态的
3）cookie需要服务器的支持（Google浏览器）
//保存
$("btnSave).onclick = function(){
localStorage.setItem('username','jzm');
}
//获取
$("btnGet).onclick = function(){
console.log(localStorage.setItem('username'));
}
//删除
$("btnRemove").onclick = function(){
localStorage.RemoveItem('username','jzm');
}
localStorage的局限
1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
十、设计模式
总体原则：开闭原则(对扩展开放，对修改关闭)
a.单例模式
某个类只允许创建一个实例，这就是单例模式
var Singleton = (function(){
function Map(width,height){
this.width = width;
this.height = height;
}
var instance;
return {
getInstance:function(width,height){
if(instance==undefined){
instance = new Map(width,height);
}else{
instance.width = width;
instance.height = height;
} return instance;
}
}
})();
var t1 = Singleton.getInstance(100,200);
console.log(t1.width,t1.height);//100,200
var t2 = Singleton.getInstance(250,350);
console.log(t1.width,t1.height);//250,350
console.log(t2.width,t2.height);//250,350
//单例模式的t1和t2指向同一个内存空间
注：单例模式的优点
1.某些类创建比较频繁，对于一些大型的对象，这是一笔很大的系统开销
2、省去了new操作符，降低了系统内存的使用频率，减轻GC压力。
3、有些类如交易所的核心交易引擎，控制着交易流程，如果该类可以创建 多个的话，系统完全乱了
b.代理模式
//人：需要有代理可以看门
function Person(name,delegate){
this.name = name;//人的姓名
//this.delegate = delegate;//人的代理
this.delegate = null;
}
//绑定代理
Person.prototype.setDelegate= function(){
this.delegate = delegate;//让人的代理开门
}
//人需要看门
Person.prototype.lookDoor = function(){
this.delegate.lookDoor();//让人的代理开门
}
//狗：可以作为人的代理看门
function Dog(name){
this.name= name;
}
Dog.prototype.lookDoor = function(){
alert(this.name+"在聚精会神地盯着大门口");
}
//var p = new Person("老王",new Dog("小黑"));
//p.lookDoor();
var p = new Person("老王");
var d = new Dog("小黑");
p.setDelegate(d);
p.lookDoor();
c.结构模式 --
f:观察者模式
观察者模式又叫做发布订阅模式，他定义了一种一对多的关系
观察者模式的好处：
1.支持简单的广播通信
g:策略模式
十一.IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
十二：用户输入按下www.baidu.com，并按下回车的时候，浏览器做了哪些事情？
www.baidu.com------------------------>找到对应的服务器 (域名的解析)----------------------->TCP的三次握手----------------------------->找到资源路径----------------->返回对象的页面-------------------------------->页面进行解析（html,css,img）------------------->tcp的四次挥手-------------->www.baidu.com
十三、图片的懒加载和预加载
懒加载也叫延迟加载： 延迟加载图片或符合某些条件时才加载某些图片。
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
十四、伪数组和标准数组
伪数组是一个含有length属性的json对象，
它是按照索引的方式存储数据，
它并不具有数组的一些方法，只能能通过Array.prototype.slice转换为真正的数组，并且带有length属性的对象。
十五、md5和sha256的加密算法
md5能加密也能解密
sha256只能加密不能解密
十六、postman：接口的校验
请求方式有哪些？
get
post
delete
put
head
connect
options
trace
十七、token
目的：做用户的验证
十八、generator
1.普通函数使用function声明，而生成器函数使用function*声明。
2.在生成器函数内部，有一种类似return的语法：关键字yield。二者的区别是，普通 函数只可以return一次，而生成器函数可以yield多次（当然也可以只yield一次）。 在生成器的执行过程中，遇到yield表达式立即暂停，后续可恢复执行状态。
3.生成器函数的返回值是 Iterator（迭代器），注意，调用生成器函数，并不会执行函数的代码，而是会返回一个Iterator（迭代器）。
4.生成器函数内部代码的真正执行是从Iterator的next()方法开始的，每调用一次next 方法，函数的代码会运行到下一个yield之前或者结束
十九、undefined和null
undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null表示”没有对象”，即该处不应该有值。
二十、原型继承
二十一、window.onload和ready的区别
(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。
二十二、prototype
我们创建的每一个函数都有一个prototype属性，这个属性是一个指向对象的指针.
构建对象中有一种模式叫做原型模式，意思是将对象实例所不可共享的属性及方法定义在构造函数中，而将可共享的属性及方法放在原型对象中，也就是prototype指向的对象中。
二十三、什么是函数的防抖和节流
函数防抖
定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。
原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。
函数节流
定义：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。
二十四、数组的方法(ES5,ES6)
foreach
map
filter
reduce
some
every
二十五、严格模式的限制
变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀0表示八进制数，否则报错
不能删除不可删除的属性，否则报错
二十六、map和forEach的区别
forEach ------ 参数1:当前正在遍历的元素
参数2:当前正在遍历元素的索引
参数3：当前正在遍历的数组
map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。map方法不会对空数组进行检测，map方法不会改变原始数组
二十七、this和$(this)的区别
$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等
而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。
二十八、处理异步的方法
callback
promise
事件监听
发布订阅模式
二十九、模块化
模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。让开发者便于维护,同时也让逻辑相同的部分可复用
模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。
三十、 new操作符干了哪些事?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
三十一、promise
Promise 对象有以下两个特点
1.对象的状态不受外界影响。
2.一旦状态改变，就不会再变，任何时候都可以得到这个结果.
Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected
3.通过new来调用
promise，就是一个对象，用来传递异步操作的消息
Promise 有四种状态
pending: 初始状态, 非fulfilled 或 rejected.
fulfilled: 成功的操作.
rejected: 失败的操作.
三十二、判断一个数据类型？
instanceOf()
typeOf()
Object.prototype.toString.call
三十三、创建单例模式的方法
三十四、什么是跨域？跨域请求资源的方法有哪些？
1、什么是跨域？
由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况：
网络协议不同，如http协议访问https协议。
端口不同，如80端口访问8080端口。
域名不同，如qianduanblog.com访问baidu.com。
子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。
域名和域名对应ip,如www.a.com访问20.205.28.90.
2、跨域请求资源的方法：
(1)、porxy代理
定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
实现方法：通过nginx代理；
注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。
(2)、CORS 【Cross-Origin Resource Sharing】
定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。
使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下：
res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8",
"Access-Control-Allow-Origin":'http://localhost',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});
(3)、jsonp
定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。
特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。
实例如下：
<script>
function testjsonp(data) {
console.log(data.name); // 获取返回的结果
}
</script>
<script>
var _script = document.createElement('script');
_script.type = "text/javascript";
_script.src = "http://localhost:8888/jsonp?callback=testjsonp";
document.head.appendChild(_script);
</script>
缺点：
1、这种方式无法发送post请求（这里）
2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。
三十五、深拷贝和浅拷贝
三十六、content-type的类型
text/plain 文本类型
text/css css类型
text/html HTML类型
image/png gif jpg 图片类型
application/x-javascript js类型
application/json json类型
三十七、缓存
三十八、gulp的作用
为了规范前端发的流程，实现前后端分离、模块化开发、版本的控制，文件合并与压缩、mock数据等功能的一个前端自动化构建工具。
gulp是通过task对整个开发过程中进行构建
三十九、路由
根据用户请求的路径返回不同的页面或者数据
四十、watch和computed的区别
四十一、GPU
四十二、浏览器的三种事件模型
1.DOM0事件模型（原始事件模型）
通过元素属性来绑定事件
<button onclick="click()">点我</button>
先获取页面元素，然后以赋值的形式来绑定事件
const btn = document.getElementById('btn')
btn.onclick = function(){
//do something
}
//解除事件
btn.onclick = null
2.DOM2事件模型
dom2新增冒泡和捕获的概念，并且支持一个元素节点绑定多个事件。
事件捕获和事件冒泡
事件捕获阶段：事件从 document 向下传播到目标元素，依次检查所有节点是否绑定了监听事件，如果有则执行。
事件处理阶段：事件在达到目标元素时，触发监听事件。
事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行
addEventListener有三个参数 事件名称、事件回调、捕获/冒泡
btn.addEventListener('click',function(){
console.log('btn')
},true)
box.addEventListener('click',function(){
console.log('box')
},false)
3.IE事件模型
IE事件只支持冒泡，所以事件流有两个阶段
1.事件处理阶段：事件在达到目标元素时，触发监听事件。
2. 事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行
// 绑定事件
el.attachEvent(eventType, handler)
// 移除事件
el.detachEvent(eventType, handler)
四十三、内存泄露
内存溢出 out of memory，是指程序在申请内存时，没有足够的内存空间供其使用，出现out of memory；比如申请了一个integer,但给它存了long才能存下的数，那就是内存溢出。
内存溢出的解决方案：
第一步，修改JVM启动参数，直接增加内存。(-Xms，-Xmx参数一定不要忘记加。)
第二步，检查错误日志，查看“OutOfMemory”错误前是否有其它异常或错误。
第三步，对代码进行走查和分析，找出可能发生内存溢出的位置。
内存泄露 memory leak，是指程序在申请内存后，无法释放已申请的内存空间，一次内存泄露危害可以忽略，但内存泄露堆积后果很严重，无论多少内存,迟早会被占光。
四十四、UML
四十五、fetch和axios
四十六、promise、generator
Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及该异步操作的结果值。
一个 Promise有以下几种状态:
pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。
Promise.reject(reason)
返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法
Promise.resolve(value)
返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。通常而言，如果你不知道一个值是否是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。
Generator的声明方式function* 函数名，一般可以在函数内看到yield关键字
四十八、arguments
arguments 是一个对应于传递给函数的参数的类数组对象。
arguments对象不是一个 Array 。它类似于Array，但除了length属性和索引元素之外没有任何Array属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的Array。
四十九、作用域链
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。
五十、defer和async
defer并行加载js文件，会按照页面上script标签的顺序执行
async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序 执行
五十一、项目的上线流程
1.项目开发
2.购买或者租用一台云服务器
3.购买并注册域名
4.申请域名ICP备案
5.公安网备案
6.搭建服务器环境
7.项目发布
8.运营维护
五十二、严格模式use strict为什么是一个字符串不是一个函数？
兼容下面的代码，若果是一个字符串，则在第一行会报错
五十三、jd访问m.jd会发生跨域吗？
会
解决办法
1.后端用同源策略
2.用script标签
五十四、高内聚、低耦合
五十五、diff
五十六、什么是BFC、IFC、GFC和FFC
CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。
FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC
BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？
float的值不为none。
overflow的值不为visible。
position的值不为relative和static。
display的值为table-cell, table-caption, inline-block中的任何一个。
那BFC一般有什么用呢？比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。
IFC
IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，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垂直排列。
那么IFC一般有什么用呢？
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
GFC
GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。
FFC
FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。
Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。
伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。