2016前端面试题总结

最新推荐文章于 2022-06-18 19:34:09 发布

我行我上

最新推荐文章于 2022-06-18 19:34:09 发布

阅读量435

点赞数 1

分类专栏：前端开发 php ajax jsonp

本文链接：https://blog.youkuaiyun.com/yangjidaimin/article/details/52012538

版权

前端开发 php ajax jsonp 专栏收录该内容

1 篇文章

订阅专栏

<span style="font-size:18px;">
</span>

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;"><!--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的定义</span>

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

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