2016前端面试题总结

css

1:css实现水平和垂直居中
利用绝对定位方式

.parent{
position:relative;background: red;width: 500px;height: 500px;
}
.child{position: absolute;width: 100px;height: 100px;top:0;left: 0;bottom: 0;right: 0;margin: auto;overflow: auto;background: green;
}
<div class="parent"><div class="child"><p>jfdajfdajfjdajafdjfdjaafjdsjfds</p><div>kfdksafkakfdskafdfskfdk</div></div>
</div>

利用负边距

.parent{position: relative;background: red;width: 500px;height: 500px;
}
.child{position: absolute;width: 100px;height: 100px;top:50%;left: 50%;margin-left:-50px;margin-top:-50px;overflow: auto;background: green;
}
<div class="parent"><div class="child"><p>jfdajfdajfjdajafdjfdjaafjdsjfds</p><div>kfdksafkakfdskafdfskfdk</div></div>
</div>

transform让百分比布局元素水平垂直居中

.center{
position: absolute;
top: 50%;
left: 50%;
width:50%;
height:30%;
padding:20px;
text-align:center;
background:#393;
color:#fff;
transform: translate(-50%, -50%);
}
<div class="center">您可以尝试改变浏览器大小，这个元素依然是水平垂直居中的哦！</div>

关键是top,left和transform的定义
table-cell实现水平和垂直居中

.wrapper{display: table-cell;text-align: center;vertical-align: middle;width: 300px;height: 300px;background: red;
}
.center{
background:#393;
color:#fff;
width: 100px;
height: 100px;
margin:0 auto;
}
<div class="wrapper"><div class="center">您可以尝试改变浏览器大小，这个元素依然是水平垂直居中的哦！</div>
</div>

flex弹性布局实现居中

.wrapper{display: flex;justify-content:center;align-items:center;width: 300px;height: 300px;background: red;
}
.center{
background:#393;
color:#fff;
width: 100px;
height: 100px;
}
<div class="wrapper"><div class="center">您可以尝试改变浏览器大小，这个元素依然是水平垂直居中的哦！</div></div>

2:怎么清除浮动以及原理？BFC是什么有什么作用？

3:怎么实现左右各100px定宽布局，中间宽度自适应？

4:div#a .b.c{}有什么问题

5：怎么实现如下布局

<body>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>
</body>

当nav+content的高度小于屏幕高度-footer的高度时，footer一直固定在屏幕底部
当页面出现滚动条后footer在页面底部。

6：手机端如何实现1px的细线。

7:rem实现自适应布局的原理描述。

JS

1：I believe I can fly.按字母表顺序排列

function compare(s1,s2){if(s1.toLowerCase() > s2.toLowerCase()){return 1;}else if(s1.toLowerCase() == s2.toLowerCase()){return 0;}else{return -1;}}var s = "I believe I can fly";var s_arr = s.split(" ");var new_s_arr = s_arr.sort(function(a,b){return compare(a,b);});console.log(new_s_arr.join(" "));

2：apply，call和bind函数的区别

3：cookie，session，localStorage，sessionStorage的区别

localStorage，sessionStorage都是H5 web Storage API新增的方法，都是只在客户端存储数据，不会自动把数据发送给服务器，有效的避免在浏览器和服务器端传递数据，减少请求。cookie也把数据保存在服务器，但是会始终在同源的http请求中携带，即使不需要，即cookie来回在浏览器和服务器端传递，而session始终保存在服务器端，具体用法可参考PHP中session。
生命周期：localStorage除非主动删除，否则不会过期，在同源中有效；sessionStorage在同源同窗口中有效，窗口一旦关闭，sessionStorage就会失效。cookie能够设置有效期，也必须是同源。
大小限制：cookie一般不能超过4KB，localStorage和sessionStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
作用域：cookie可以设置作用域

4:数组去重

var a = [1, 3, 4, 5, 5, 6, 7, 7, 9, 9, 11, 17, 19, 20];
var b = {};
var c = [];
for(var i = 0; i< a.length; i++) {if(!b[a[i]]) {b[a[i]] = a[i];c[i] = a[i]}
}
console.log(c);

5:原生js实现insertAfter方法。

6:怎么把两个有序数组合并成一个有序数组

var a = [1,4,5,7,9,20];
var b = [3,5,6,7,9,11,17,19];
var c = a.concat(b);
c.sort(function(x, y) {return x - y;
});
console.log(c);

7:

 var a = [[1,1],[2,2],[3,3]];var b = a;b.push([4,4]);此时a  = b =  [[1,1],[2,2],[3,3],[4,4]];怎么实现b的值改变但不影响a的值？ var b=a.concat([]);b.push([4,4]);

8:null和undefined的区别

9:alert(a);->referenceError

10:如何把类数组对象arguments变成真正的数组。

11:区分[]和{}

12:节流函数以及使用场景

13:图片懒加载

14：怎么实现边滚动变加载页面（分页请求数据）

15:怎么实现页面滚动停止执行某个事件？

16:js中this的指向问题。

17:实现二叉树先序查找算法。

18:闭包相关问题。

19:如何实现深度拷贝？

function deepCopy(p, c) {var c = c || {};for(var key in p) {if(p.hasOwnProperty(key)) {if(typeof p[key] === 'object') {c[key] = Array.isArray(p[key]) ? [] : c[key] || {};deepCopy(p[key], c[key]); } } else {c[key] = p[key];}}return c;
}

20：数组去重

var uniq = function(array) {return Array.prototype.filter.call(array, function(item,index) {return array.indexof(item) === index;})
}

未完待续