H5和C3有哪些新特性
H5: 语义化标签（nva、aside、dialog、header、footer等）,canvas,拖放drag和drop，audio和video、web存储（localStorage、session Storage）；
C3：border，backgroundColor，transform，translate，animation，2d，3d，transition，渐变，flex布局，媒体查询，选择器；
盒子模型是什么
盒子模型的组成部分：padding，margin，border，width，height
IE盒子模型和W3C盒子模型区别：W3C的width和height是内容的宽度高度，IE的width和height的内容是加padding加border的宽度高度；
box-sizing：
content-box；（W3C盒子模型）
border-box；（IE盒子模型）
清除浮动的方法
1：给父元素固定的高度；
2：在浮动元素的结尾处添加一个空的标签，设置属性为clear：both；
3：使用overflow属性来清除浮动；
4：使用伪元素来清除浮动，例如：
.clearfix:after{
content:“”; //设置内容为空
height:0; //高度为0
line-height:0; //行高为0
display:block; //将文本转为块级元素
visibility:hidden; //将元素隐藏
clear:both //清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
说说你对语义化的理解
语义化就是将页面结构更加清晰化，什么样的代码写在什么样的标签里面，比如p标签段里写段落，nva标签里写导航栏，它可以让浏览器更好的解析，也利于seo；
如何适配移动端
方法一：rem+百分比布局
不过有个问题，页面加载未完成前会出现瞬间错乱的现象，虽然时间不算长，但肉眼可见，解决起来比较麻烦不推荐
方法二：使用c3的媒体查询
media queries主要是通过查询设备的宽度来执行不同的css代码@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ /*你的css代码*/ }例如：
@media screen and (min-device-width: 320px)and (-webkit-min->device-pixel-ratio: 2) { html{ font-size:10px; } } @media only screen and (min-device-width: 375px)and (-webkit-min->device-pixel-ratio: 2) { html{ font-size:12px; } } @media only screen and (min-device-width: 375px)and (-webkit-min->device-pixel-ratio: 3) { html{ font-size:16px; } } @media only screen and (min-device-width:412px) and (-webkit-min->device-pixel-ratio: 3) { html{ font-size:20px; } }方法三：Flex布局
实现原理
它的viewport是固定的，高度定死，宽度自适应，元素都采用px做单位<meta name="viewport" content="width=device-width,initial-scale=1,maximum-> scale=1,user-scalable=no">屏幕随着宽度变化，页面也会跟着变化，效果就和pc页面的流体布局差不多，在哪个宽度需要调整的时候使用相应式布局调一下就行，这样就实现了适配。
ES6有哪些新特性，与ES5的区别在哪
ES6里有let关键字，const常量，箭头函数，解构赋值，对象属性值的简单方法，promise，async，class类继承等
与ES5的区别就是多了块级作用域，之前var声明的变量会进行变量的提升，要么是全局或者局部的，而let声明的变量只在代码块只起作用
箭头函数和普通函数的区别
箭头函数相当于匿名函数，不能作为构造函数，没有原型属性；
箭头函数不能绑定arguments，可以用rest参数解决；
箭头函数不绑定this，会捕获其上下午的this；
箭头函数的this指向调用它的那个对象；
箭头函数的this永远指向上下文的this，任何方法都改变不了this的指向；
ajax的工作原理是什么？使用步骤？如何上传文件？
ajax是一种异步数据的技术，它的工作原理是通过XMLHttpRequest对象来向服务器发送异步请求，类似一个中间层，负责请求数据，不影响浏览器其他事件执行，等到数据回来之后在通知浏览器，浏览器在进行处理；
Ajax的使用步骤
1、新建一个XMLHttpRequest对象 let xhr = new XMLHttpRequest()；
2、使用open()和send()方法发送请求xhr.open(url:xxx)xhr.send();
3、使用onload注册回调，xhr.οnlοad=function(){};
4、根据服务器返回的结果做响应的处理xhr.responseText;
Ajax如何上传文件
可以使用FormData对象
1、创建一个 FormData 对象 f = new FormData()；
2 、通过 files[0] 获取到确认选择的图片信息 imgInfo=document.getElementById(‘img’).files[0]；
3、把文件信息添加到 FormData 对象中 ，注意这里是键值对的形式
f.append(‘img’,imgInfo)；
4、在 ajax 请求的响应体中添加 FormData 对象 $ajax({data:f})；
get与post请求的区别
1. 参数传输方式不同
get：通过URL传输参数；
post：通过请求体传输参数；
2. 安全性不同
get：通过URL传输的参数，在历史记录，浏览器缓存很容易查到数据信息，所以安全性偏低；
post：通过请求体传输参数，浏览器会对其进行加密，安全性比较高；
3. 可传输参数的大小不同
get：因为是在URL中传输，有长度限制；
post：可以传输任何格式的参数；
什么事跨域，如何解决跨域
跨域就是浏览器为了安全做的同源策略，协议、域名、端口，这三者有一者不同就会产生跨域；
跨域的解决方法
方法一（JSONP）：
使用JSONP,利用了’script’标签中的’src’属性,没有跨域限制的特性，并提供一个回调函数,回调函数名称为callback；
方法二（代理）：
vue中集成了跨域的解决，可以通过添加代理：
在vue.config.js中添加了devServer:{proxy: 代理地址}；
方法三（后端PHP）：
需要后端的PHP，通过修改header，来允许所有来源访问：header('Access-Control-Allow-Origin'); //允许所有来源访问 header('Access-Control-Allow-Method:POST,GET'); //允许访问的方式
什么事Jsonp？Jsonp的原理是什么？
Jsonp是一种轻量级的数据传输格式，用来解决跨域请求问题；
原理是利用了script标签里的src属性链接可以访问跨域的js脚本，利用这个特性，服务端不再返回json格式的数据，而是返回一段调用了某个函数的js代码，在src中进行了调用，这样就实现了跨域；
什么是Promise？
promise是用来解决多层回调嵌套的，也就是我们经常说的回调地狱；
它是一个构造函数，通过new关键字创建，有2个参数分别是resolve、reject，这两个参数也是一个方法，resolve返回成功的值，然后通过 .then 拿到结果，如果有多层，可以在每层里面继续调用promise，会返回一个新的对象，就可以继续使用 .then方法，这样就可以使得结构明了，解决函数多层的嵌套；
cookies，sessionStorage，localStorage的区别
1.生命周期不同：
cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效;
localStorage：除非被手动清除，否则将会永久保存；
sessionStorage： 仅在当前网页会话下有效，关闭页面或浏览器后就会被清除；
2.数据大小不同
cookies数据大小不能超过4k；
sessionStorage和localStorage数据大小可以达到 5M 或者更大；
3.http请求不同
cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题；
localStorage和sessionStorage：仅在浏览器中保存，不参与和服务器的通信；
4.作用域不同
cookie也是在所有同源窗口中都是共享的；
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
页面的绘制过程
1、浏览器把获取到的html代码解析成一个dom树，dom树中包含所有的节点，隐藏也在里面；
2、浏览器将获取到的所有css样式解析成样式结构提；
3、然后将dom树和样式结构生成一个render tree呈现树，render tree里面的每个节点都有自己的样式，不包含隐藏的节点，但是visibility：hidden的节点还是在里面，因为它占有位置，影响布局，在css2里面，将这些节点称为box，就是含有填充，边框，边距和位置的盒子；
一旦render tree构建完毕，浏览器就根据它来绘制页面
页面的重绘和回流
回流：当render tree中的一部分或者全部元素规模尺寸，样式，布局发生改变时而需要重新构建，这就叫做回流；每个页面至少回流一次，就是在页面第一次加载的时候；
重绘：当回流的过程中，浏览器中会把渲染树受影响的部分失效，并重新构建这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，这个过程就是重绘
回流必定引起重绘，重绘不一定引起回流