1、float的作用？
定义元素在哪个方向浮动（left,right,none,inherit）。浮动元素会生成一个块级框，不论它本身是何种元素。
接下来会有一系列的问题：
1）怎么清除浮动？
- A、在浮动元素下方添加空div行，并添加css样式
.clear{
clear:both;
height: 0;
overflow:hidden;
}
- B、父级div定义 overflow属性
div{
overflow:auto| hidden
}
- C、添加伪元素：after 三行情书
.content :after {
clear: both;
content: '';
display: block;
}
2）伪类和伪元素有哪些？区别是什么？
伪类：
css3新增伪类：
p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素。
p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素。
p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素。
p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
伪元素：
区别：
A、伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息（通常加一个class可以达到相同的效果）
B、伪元素本质上是创建了一个有内容的虚拟容器(添加一个标签元素才能达到相同的效果)
C、CSS3中伪类和伪元素的语法不同（:和::）
D、可以同时使用多个伪类，而只能同时使用一个伪元素
参考文章：CSS3中伪类和伪元素的特性和区别
2、写出下面代码的运行结果
var value1 = 0, value2 = 0, value3 = 0;
for ( var i = 1; i <= 3; i++) {
var i2 = i;
(function() {
var i3 = i;
setTimeout(function() {
value1 += i;
value2 += i2;
value3 += i3;
}, 1);
})();
}
setTimeout(function() {
console.log(value1, value2, value3);
}, 100);
考察点：for循环，作用域，闭包，立即执行函数，setTimeout
解析：
for循环执行完毕后，i=4 ,i2=3
value1:0+4+4+4=12
value2:0+3+3+3=9
value3:0+1+2+3=6
3、写出下面代码的运行结果
function fun(n,o){
console.log(o);
return {
fun:function(m){
return fun(m,n);
}
}
}
var a=fun(0);
a.fun(1);
a.fun(2);
a.fun(3);
var b=fun(0).fun(1).fun(2).fun(3);
var c=fun(0).fun(1);
c.fun(2);
c.fun(3);
考察点：闭包，作用对象
执行var a=fun(0);，a的值为：
a={
fun:function(m){
return fun(m,0);
}
}
所以a.fun(1)、a.fun(2)、a.fun(3)的console.log值即是fun(1,0)、fun(2,0)、fun(3,0)的console.log值，均为0。
那么c也是一个对象(和a差不多，只是参数值不一样):
c={
fun:function(m){
return fun(m,1);
}
}
那么c.fun(2)就输出1了，c.fun(3)当然也是1（第二个入参根本就没变呢），而c.fun(2)返回的新对象已经变为：
{
fun:function(m){
return fun(m,2);
}
}
所以c.fun(2).fun(3)的输出结果当然为2啦。
所以最终输出结果为：
undefined
0
0
0
undefined,0,1,2
undefined,0
1
1
4、原型和原型链
prototype:原型，函数特有属性，对象。面向对象的编程方式，用来实现基于原型的继承与属性的共享。通过Function.prototype.bind方法构造出来的函数是个例外，它没有prototype属性。
[[prototype]]:对象内部实现的属性，指向构造函数的原型（Object.create创建的例外），浏览器里表现为
__proto__
属性（chrome和firefox已实现），原型链实现和查找必用属性。
一张经典的图：
参考文章：
js中proto和prototype的区别和关系
## Js中Prototype、proto、Constructor、Object、Function关系介绍
延伸：使用new操作符的本质是什么？
1）创建类的实例，这个实例是一个空对象并将它的__proto __属性指向构造函数的原型；
2）初始化实例，传参、调用构造函数，设置this指向这个实例；
3）返回实例
参考文章：## How Prototypal Inheritance really works
5、浏览器和内核代表
1、Internet Explorer ， 内核 Trident ， 微软开发的一种排版引擎
2、Firefox ，内核Gecko，以C++编写的网页排版引擎，开源
3、safari、Opera和chrome，内核WebKit，渲染速度极快
6、浏览器缓存
两张图：
参考文章：
浏览器 HTTP 协议缓存机制详解
7、es6新特性
参考ES6新特性概览
8、html5有哪些新特性?移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？HTML5 为什么只需要写 !DOCTYPE HTML？如何区分 HTML 和HTML5？
1）新特性
绘画 canvas；用于媒介回放的 video 和 audio 元素；本地离线存储 localStorage 、sessionStorage ；语义化更好的内容元素，比如 article、footer、header、nav、section；表单控件，calendar、date、time、email、url、search；新的技术webworker, websocket, Geolocation
2）移除的元素
纯表现的元素：basefont(默认字体)，big(大字体)，center(水平居中)，font(字体标签)，strike(中横线)，tt(文本等宽)，u(下划线)；
对可用性产生负面影响的元素：frameset（框架集），frame，noframes（为那些不支持框架的浏览器显示文本）。
3）HTML5新标签的浏览器兼容问题
A、IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签；浏览器支持新标签后，还需要添加标签默认的样式。
B、最好的方式是直接使用成熟的框架：使用最多的是html5shim框架，必须在head标签中调用
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
4）HTML5 为什么只需要写 !DOCTYPE HTML
而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。
其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。
5）如何区分HTML 和HTML5
A、看doctype声明
B、看meta头（h5<meta charset="UTF-8">,h4要很长一段）
C、是否用了h5新标签、新特性
延伸：语义化HTML的好处?
参考：
HTML语义化
如何理解web语义化
9、cookie、sessionStorage、localStorage的作用和区别？
同：都保存在客户端，用以存储数据，同源
cookie：不超过4kb,发送http请求时携带，可设置过期时间（默认浏览器关闭后失效）
sessionStorage：5M或更大，存储在客户端，网页关闭即失效(刷新不失效)，不发送给服务器
localStorage：5M或更大，存储在客户端，永久存储，不发送给服务器
如果超过最大限制，会报错，Uncaught QuotaExceededError
web-storage测试工具
10、css有哪些选择器？优先级？哪些属性可继承？css3新增的伪类有哪些？
1）选择器
id >class> 标签> 相邻> 子> 后代 >通配符(*) >属性> 伪类
优先级为： !important > id > class > tag （ important 比内联优先级高）
2）可继承属性
font-size font-family color, UL LI DL DD DT;
不可继承：border padding margin width height
3）CSS3新增伪类
前面已说，此处略
11、z-index的作用和使用条件
作用：设置元素的堆叠顺序
使用条件：仅在定位元素上奏效（ position:absolute|relative|fixed）
