盒模型
页面渲染时，dom 元素所采用的 布局模型。可通过 box-sizing 进行设置。主要分为 标准盒模型 与 IE盒模型。
根据计算宽高的区域可分为：
content-box(W3C 标准盒模型)border-box(IE 盒模型)padding-box(仅Firefox实现过，后来已废除)margin-box(浏览器未实现)
<div class = 'box'><div>
.box {
width:200px;
height:100px;
border:1px solid red;
padding: 10px;
margin:20px;
box-sizing: ···;
}
以上面的box为例，在标准盒模型(box-sizing: content-box)下，整个div宽度为：200 + (1 + 10 + 20) * 2 = 262px; 内容部分content宽度为200px;
在IE盒模型(box-sizing: border-box)下，整个div宽度为：200 + 20 * 2 = 240px; 内容部分content宽度为200 - (1 + 10) * 2 = 178px。
BFC
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
下列常见的方式会创建块格式化上下文：
根元素或包含根元素的元素
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- overflow 值不为 visible 的块元素
- display 值为 flow-root 的元素
- 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
块格式化上下文包含创建它的元素内部的所有内容。
作用：
- 让浮动内容和周围的内容等高
- 外边距塌陷(防止两个元素上下margin合并)
link 与 @import 的区别
link功能较多，可以定义RSS，定义Rel等作用，而@import只能用于加载css- 当解析到
link时，页面会同步加载所引的css，而@import所引用的css会等到页面加载完才被加载 @import需要IE5以上才能使用，link可以使用js动态引入，@import不行
ES6 class 类的继承使用
将以下用 ES6 实现
//函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）
function Person(name,age) {
this.name = name;
this.age=age;
}
Person.prototype.say = function(){
return "我的名字叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Person("laotie",88);//通过构造函数创建对象，必须使用new 运算符
console.log(obj.say());//我的名字叫laotie今年88岁了
ES6 实现
class Person{//定义了一个名字为Person的类
constructor(name,age){//constructor是一个构造方法，用来接收参数
this.name = name;//this代表的是实例对象
this.age=age;
}
say = () => `我的名字叫${this.name},今年${this.age}岁了`
}
var obj=new Person("laotie",88);
console.log(obj.say());
理解和使用ES6中的Symbol
应用场景：
- 使用Symbol来作为对象属性名(key)
- 使用Symbol来替代常量
- 使用Symbol定义类的私有属性/方法
