面试题原站链接： http://www.jianshu.com/p/c41cc287d7d4
第一套
题目1.css实现水平垂直居中
HTML结构如下：
<div class="box">
<div class="con"></div>
</div>
（1）inline-block+text-align+table-cell+vertical-align
.box{text-align:center;display:table-cell;vertical-align:middle;}
.con{display:inline-block;*display:inline;*zoom:1;}
缺点：IE6、IE7不支持table-cell，可以换成table布局
（2）absolute+transform
.box{position:relative;}
.con{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
缺点：IE8及以下不支持transform
（3）flex+justify-content+align-items
justify-content–水平居中
align-items–垂直居中
.box{display: flex;justify-content:center;align-items: center;}
题目2.写出原生js或者JQ循环下面的<li>内容
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
<li>test6</li>
</ul>
js方法：
var oUl = document.createElement('ul')[0];
var str = '';
var num = 1;
for (var i = 0; i < 6; i++) {
num = i+1;
str += '<li>test'+num+'</li>';
}
oUl.innerHTML = str;
document.body.appendChild(oUl);
我想的JQ方法也是使用for循环然后添加元素。有别的方法欢迎告诉我~
题目3：ajax请求的时候get和post方式的区别，用jQ写出ajax请求。
get:一般用于信息的获取，使用URL传递参数，对发送的信息有数量限制，一般在2000字符，常用于查询、获取操作，不是很安全，任何人可见
post：一般用于修改服务器上的资源，对所发送的数量无限制。常用于发送表单数据，新建、修改、删除等操作，所发送的信息不在URL中显示，也不对其他人显示，安全一些
题目4：js中函数split(),join()区别
split方法将字符串分割成一个数组，且分割符并不作为返回数组元素的一部分。
join方法是将数组用分隔符连起来，分隔符会作为字符串的一部分返回。
题目5：熟悉微信小程序吗？什么是微信小程序？ 恩，百度了一下。
什么是微信小程序？来自知乎
小程序是一种不需要下载安装即可使用的应用，（也就是说可以不用担心内存啦~）它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体验了用完就走的理念，用户不用担心是否安装太多应用的问题。应用将无处不在，又随时可用，且无需安装卸载。
题目6：如图所示有一个对象为树形结构，每个节点结构为： node：{id=’xxx’,name=’xxx’,children:[node,node,node,…]},每个id唯一，当没有子节点时，children为false
现有一需求，给出id输出node信息，请完成方法getNodeById。
var data={id='xxx',name='xxx',children:[node,node,node,...]};
var id='aaa';
var node=getNodeById(data,id);
console.log(node);
答题要求，先写出解题思路，在进行编码。
这个没看懂题目的意思。
第二套
1.HTTP状态码及其含义
常见状态码：
200：请求成功
301：资源移动
304：所请求资源未修改，浏览器读取缓存数据
400：请求语法错误
404：未找到资源
500：服务器内部错误
2.设置元素浮动后，该元素的display值是多少？
display值：block
3.请描述cookies、sessionStorage和localStorage的区别
图片来自：http://jerryzou.com/posts/cookie-and-web-storage/
4.请解释你对盒模型的理解，以及如何在css中告诉浏览器使用不同的盒模型。
盒模型包括content、padding、border、margin
标准盒模型：内容只有content
box-sizing:content-box;
怪异盒模型：内容包含content、padding和border
box-sizing:border-box;
5.下面语句返回值是什么？
var a=6;
setTimeout(function(){
console.log(a);
a=666;
},1000)
a=66;
答案：66
考察作用域。因为setTimeout中的a是一个全局变量，所以在这一秒钟以内分别是定义了变量a，将6赋值给a，将666赋值给a，将66赋值给a.
如果将代码改成
var a=6;
setTimeout(function(){
console.log(a);
var a=666;
},1000)
a=66;
那么打印出来的就是undefined了。
第三套
题目1.css选择符有哪些？按照优先级进行排序。
id选择器>class选择器>伪类选择器>标签选择器>通配符选择器
题目2.前端页面有js行为层和另外2个层是什么？作用是什么。
前端页面由结构（html）、样式（css）和行为（js）组成。
题目3.你做的页面在哪些内核浏览器测试过？
IE
chrome
Firefox
题目4.在Jquery中被誉为工厂函数的是()
a.ready() b.function() c.$() d.factory()
答案：c
题目5.setTimeout(“buy()”,2000)表示的是什么
间隔2秒后，buy()函数被调用一次。
第四套
###第五套
1.写出以下值
alert(1&&2);alert(1||2);
2.验证字符串的组成规则，第一个需为数字，后面可以是字母，数字，下划线，总长度为5-20；
3.以下代码，alert值是多少？
window.val = 1;
var json = {
val: 10,
dbl: function() {
this.val *= 2;
}
};
json.dbl();
var dbl = json.dbl;
dbl();
json.dbl.call(window);
alert(window.val + json.val);
4.以下代码，alert值是多少？
(function() {
var val = 1;
var json = {
val: 10,
dbl: function() {
val *= 2;
}
};
json.dbl();
alert(json.val + val);
}());
5.看不到试题
6.以下代码，alert值是多少？
var foo = 'Hello';
(function() {
var bar = 'World';
alert(foo + bar);
})();
alert(foo + bar);
7.foo.x的值是什么？
var foo={n:1};
var bar=foo;
foo.x=foo={n:2};
8.写出以下代码的输出内容
console.log('one');
setTimeout(function() {
console.log('two');
}, 0);
console.log('three');
9.你对ES6的了解有哪些？
