[if !supportLists]1、[endif]Css盒子模型，绝对定位和相对定位？
答：css盒子模型包含了内容conentt 外边距 margin内边距padding 边框border 宽width 高height
绝对定位：脱离文档流，不占据空间一般按照父元素的相对定位移动
相对定位：不脱离文档流，位置参照自己本身，占据原来的空间
[if !supportLists]2、[endif]清除浮动，什么时候需要清除浮动，清除浮动有哪些方法
答：浮动最开始出现的意义是让文字环绕图片，后来用于让三个块级元素并排展示，这时候就出现了浮动，由于浮动会使元素的高度塌陷，所以我们需要清除浮动，方法有三种：
[if !supportLists]一、[endif]直接在浮动元素后面加一个冗余元素clear:both
[if !supportLists]二、[endif]给父元素设置一个伪元素
.clearfix:after{
content: '';
display: table;
clear: both;}
[if !supportLists]三、[endif]给父元素添加overflow:hidden可以清除浮动的原理：
增加后，形成了一个块级上下文，即BFC，overflow:hidden的本意是将溢出父元素的内容裁切掉，而在BFC中，计算高度的时候会将浮动的元素也计算在内，所以overflow:hidee在裁切的时候顺带达到了清除浮动的目的。
四：如何让一个元素水平垂直居中
方法一、使用flex布局
.parent {
width: 800px;
height: 600px;
background-color: pink;
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
.children {
width:200px;
height: 100px;
background-color: red;
}
方法二、使用绝对定位加transform
.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
方法三、父元素相对定位子元素决对定位使margin左右的负值为宽高的一半来实现
.parent {
position: relative;
background-color: pink;
height: 600px;
width: 100%;
}
.children {
position: absolute;
width:200px;
height: 200px;
background-color: red;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
方法四、使用定位加auto
.parent {
position: relative;
background-color: pink;
height: 600px;
width: 100%;
}
.children {
position: absolute;
width:200px;
height: 200px;
background-color: red;
top: 0;
left: 0;
bottom:0;
right: 0;
margin: auto
}
4、display 和 position 的取值和各自的用法
答：
Display:none隐藏元素 隐藏后不占据空间
Display:inline行内元素 以水平方向布局，垂直方向的padding和margin无效，大小和内容一样且无法设置宽高
Display:block块级元素 独占一行 可以设置宽高
Display:inline-block既有block的宽高特性又有inline的同行特性
Position:static没有定位，就是普通的元素
Position:relative相对定位 相对于自己本身移动 原本的空间继续占有 没有脱离文档流
Positon: absolute绝对定位 相对于除了static之外的父类定位 脱离文档流 不占据空间位置
Position:fixed固定定位 相对于浏览器窗口定位 而且不能改变
Position: inherit从父类继承position的属性 但是任何版本的IE都不支持该属性
Position：sticky 该元素不脱离文档流 保留元素在文档流的位置兼容性不好 还在试验阶段 不是W3C推荐的标准
5、样式的层级关系，选择器的优先级，样式冲突，以及抽离样式模块怎么写，说出思路，有无实践经验？
答：层级关系：比如ul li可以ul {} 也可以 li{} 但是推荐ui li {}
选择器的优先级：!important -->id选择器-->类选择器-->标签选择器 样式遵循就近原则
样式冲突：遵循选择器的优先级以及遵循就近原则
抽离样式模块：将一些经常使用的标签抽离出来赋予样式单独建一个css样式文件
[if !supportLists]6、[endif]css3动画效果属性，canvas svg 的区别 css3中新增伪类举例
答：
动画效果：transtition平衡过渡
Animation动画
Transform改变元素的大小 位置
Canvas svg的区别：
Svg绘制出来的每一个图形的元素都是一个dom节点，方便绑定事件或修改 而canvas输出的是一整副画布
Svg是矢量图片，可以随意的修改参数的大小 不会失真和锯齿 但是canvas输出的是标量图片 放大图片会失真和锯齿
Css3中新增的伪类有：
:disabled选择禁用的表单元素
:checked选择被选中的表单元素
:after在元素后面添加内容
:before在元素前面添加内容
:nth-child(n)匹配父元素下指定子元素 在所有子元素中排序第n
[if !supportLists]7、[endif]px em rem的区别 css中link 和@import的区别？
答：px是固定像素，一旦设置就无法根据因为适应页面的大小而改变 em和rem相对灵活，是相对单位，可以根据页面的改变而自适应，一般用于响应式布局 em和rem的区别，em相对于父元素 rem相对于根元素
Link和@import 的区别是：
[if !supportLists]一、[endif]属性不同：link是html提供的标签，不仅可以加载css文件 还能定义rss rel连接属性等 而@import是css中的语法规则
[if !supportLists]二、[endif]加载顺序不同：页面打开时，link引用的css文件被加载，而@import引用的css要等页面都加载完之后才加载
[if !supportLists]三、[endif]Link不存在兼容问题
[if !supportLists]四、[endif]Js操作dom可以使link改变样式 而@import引入的则不行 @import的性能并不好
[if !supportLists]8、[endif]js里有哪些数据类型，解释清楚null 和 undefined ,解释清楚原始数据类型和引用数据类型 比如讲一下1 和 Number(1)的区别
答：
基本数据类型：字符串string数字 Number 布尔 boolean
复杂数据类型：数组array对象object
特殊数据类型：null undefined
Null是此处没有对象 不应该有值
Undefined声明了但是没有赋值
区别：从结果上来说没有区别，从现实上来说Number是一个包装器 相当于函数调用 其内部有做额外处理 跟字面量在效率上会有一丝差距 所以通常采用字面量的形式 var nun = 1
[if !supportLists]9、[endif]什么是prototype原型链的理解 什么时候用prototype
答：prototype是函数对象上面预设的对象属性
原型链：当访问一个对象的某个属性时，会现在这个对象本身属性上查找，如果没有找到，则会去他的__proto__隐式原型上查找，即它的构造函数的prorotype 如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个练市结构，我们称为原型链
[if !supportLists]10、[endif]函数里的this什么含义，什么情况下，怎么使用
答：this可以传递上下文对象，避免在定义中将参数实际名称写入，更可以避免在传递过程中造成混乱，所以使用this是非常有效的方法。
默认情况下this代表window对象
通过对象调用该函数，this代表最后调用它的函数
使用bind()、apply()、call()调用时，this代表传入的第一个参数
如果函数是一个构造函数，用new创建对象时，this则代表新创建的对象
[if !supportLists]11、[endif]apply 和call什么含义，什么区别，什么时候用
答：call和apply 都用于函数调用，和使用函数名直接调用不同，call和apply可以指定一个额外的参数作为函数体内的this对象
区别：call采用不定长的参数列表 而apply使用一个参数数组
使用时间：由于call和aplly可以改变函数体内的this指向，因此通常被用来将一个对象原型上的方法应用到另一个对象上。一个常见的应用是处理函数的arguments，将其转换为array类型
[if !supportLists]12、[endif]数组和对象有哪些原生方法，列举一下，分别是什么含义
答：数组：
Length: 设置或返回 数组中元素的数目
Push()：向数组末尾添加一个或多个元素 并返回新的长度
Shift()：用于把数组的第一个元素从其中删除，并返回第一个元素的值
Unshift()：向数组的开头添加一个或更多元素，并返回新的长度
Pop()：用于删除并返回数组的最后一个元素
Splice()：用于插入、删除或替换数组的元素
Concat()：用于连接两个或多个数组
Join()：用于把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的
toString()：可把数组转换为字符串，并返回结果
Reverse()：用于点到数组中元素的顺序
Slice()：可从已有的数组中返回选定的元素
Sort()：用于对数组的元素进行排序（从小到大）
indexOf()：返回获取项在数组中的索引
lastIndexOf()：返回或趋向在数组中出现的最后一次索引
forEach()：循环遍历数组 参数是一个匿名函数 默认返回undefined
Map()：循环遍历数组 参数是一个匿名函数
对象：
Object.create()：创建一个拥有指定原型和若干个指定属性的对象
Object.defineProperty()：直接在一个对象是定义一个新属性，或者修改一个已经存在的属性，并返回这个对象
Object.isFrozen()：判断一个对象是否被冻结
Object.assign() 可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象
[if !supportLists]13、[endif]怎样避免全局变量污染？ES5严格模式的作用，ES6箭头函数和普通函数一样吗？
答：
避免全局变量污染：
一：只创建一个全局变量，并定义该变量为当前容器，把其他全局变量追加到该命名空间下；二：利用匿名函数将脚本包裹起来
ES5严格模式的作用：规范代码，使代码更加的严谨
ES6箭头函数和普通函数不一样。普通函数中this指向函数被调用的对象，因此对于不同的调用者，this的值是不同的。而箭头函数中并没有自己的this，（同时也没有其他的局部变量 如this argument super等）所以箭头函数中的this是固定的 它指向定义该函数时所在的对象
[if !supportLists]14、[endif]js模块包装格式都用过哪些，CommonJS AMD CMD 。定义一个js模块，最精简的格式是怎样
答：commonJS mok主要为了js在后端的表现制定的，就如nodejs就遵循了commonJS规范
但它不适合前端，所以出现了AMD （异步模块定义）出现了，它主要就是为前端js的表现制定规范
[if !supportLists]15、[endif]js怎么实现一个类，怎么实例化这个类
答：在js中一切都是对象，包括函数，在js中并没有真正的类，但js提供了一种折中的方法：把对象定义描述为对象的配方
实例化类：一：混合的构造函数/原型方式； 二：动态原型方法
[if !supportLists]16、[endif]理解闭包吗？请讲一下闭包在实际开发中的作用，闭包建议频繁使用吗？
答：闭包就是在一个函数中返回另一个函数，里面的函数可以访问外面函数的变量，在实际开发中，闭包的作用是封装变量，收敛权限，不建议频繁使用，因为不易懂且有内存问题。
[if !supportLists]17、[endif]说一下了解的js设计模式，解释一下单例、工厂、观察者
答：工厂模式、构造函数模式、原型模式、动态原型模式
单例模式：确保只有一个实例，并提供全局访问
工厂模式：不暴露对象创建的逻辑，而是将逻辑封装在一个函数内，那么这个函数可以成为工厂。
观察者模式：作用是当一个对象的状态发生变化时，能够自动通知其他关联对象，自动刷新对象状态。
[if !supportLists]18、[endif]ajax 跨域有哪些方法，jsonp 的原理是什么，如果页面编码和被请求的资源编码不一致如何处理?
答：使用cors 和jsonP可以实现跨域
JsonP的原理就是利用