2016前端面试题总结

Love The Way You Lie 2022-07-20 12:07 102阅读 0赞

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

2：css实现水平和垂直居中

<span style="font-size:18px;"> .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></span>

<pre name="code" class="html" style="color: rgb(51, 51, 51); line-height: 26px;"><span style="font-size:18px;"> .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></span>

<span style="font-size:18px;"> .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的定义</span>

.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>

.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>

3：apply，call和bind函数的区别   
var xw = \{   
name : “小王”,   
gender : “男”,   
age : 24,   
say : function(school,grade) \{   
alert(this.name + ” , ” + this.gender + ” ,今年” + this.age + ” ,在” + school + “上” + grade);   
\}   
\}   
var xh = \{   
name : “小红”,   
gender : “女”,   
age : 18   
\}   
call方法   
xw.say.call(xh,”实验小学”,”六年级”);   
apply方法   
xw.say.apply(xh,\[“实验小学”,”六年级”\]);   
bind方法   
xw.say.bind(xh)(“实验小学”,”六年级”);   
或者   
xw.say.bind(xh,”实验小学”,”六年级”)();

call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以

4：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可以设置作用域