前端面试

首先进行自我介绍，接着前端知识提问

1、css盒子模型是什么？

css盒子模型是用来装页面上的元素的矩形区域，每个CSS盒模型都包括内容区（content）、填充区（padding）、边框区（border）和外边距（margin）。
盒子模型包括IE盒子模型和标准的W3C盒子模型
box-sizing：
border-box（IE盒子模型，width：左右border+左右padding+content ，整个盒子宽度：width）
content-box（标准盒子模型，width：content，整个盒子宽度：左右border+左右padding+width）
padding-box（width：左右padding+width）

2、垂直居中如何实现

• 单行文本：设置hight和line-hight

<div class="box2" style="width:150px;height:100px;line-height: 100px;">文本垂直水平居中</div>

• 多行文本：利用flex布局

 body{
          width: 100%;
          height: 100%;
          display: flex;             /*flex弹性布局*/
          align-items: center;
       }

• 使用绝对定位和负边距

<style>
        .box{
               width: 150px;
               height: 150px;
               background:blue;
               position: relative;
        }
        p{
               width: 50px;
               height: 50px;
               background:red;
               position: absolute;
               left:50%;
               top:50%;
               margin-left:-25px;
               margin-top: -25px;
        }
    </style>

• 使用transform:translate定位

<style>
    *{padding: 0;margin: 0;}   /*解决容器内元素.div是p元素产生的居中不完整*/
        .box{
                margin: 20px auto;
                width: 150px;height: 150px;
                background:blue;
                position: relative;
                text-align: center;
        }
        .box .div1{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
            background: red
        }
    </style>

• 通过display:table-cell

.box{
                width: 150px;height: 150px;
                background:blue;
                position: relative;
                text-align: center;
                display: table-cell;
                vertical-align: middle;
}

3、js数组有哪些方法？splice与slice的区别？

pop（删除最后一个元素）
push（新增元素）
sort（数组排序）
shift（删除数组第一个元素）
unshift（新增元素到开头）
fiter（将所有元素进行判断，将满足条件的元素作为一个新的数组返回）
splice（开始位置， 删除的个数，元素）实现增删改，会修改数组本身

     let arr = [1, 2, 3, 4, 5];
     let arr1 = arr.splice(2, 0 'haha')
     let arr2 = arr.splice(2, 3)
     let arr1 = arr.splice(2, 1 'haha')
     console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一个元素
     console.log(arr2) //[1, 2] 删除三个元素
     console.log(arr3) //[1, 2, 'haha', 4, 5] 替换一个元素

slice（start，end）从已有数组中返回所选的某段数组元素，不会修改数组本身

4、ES6有哪些特性？

ES6特性

5、0.1+0.2=？

0.30000000000000004

6、Vue与Jquery有什么区别？

Vue是数据驱动，Jquery是模型驱动。

• jQuery是使用选择器选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$(“lable”).val();,它还是依赖DOM元素的值。
• Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

7、说一说Vue中的单项数据流与双向数据绑定？

• 单项数据流
  
  数据单一方向流，对于 Vue 来说，组件之间的数据传递具有单向数据流这样的特性，对于父子组件来说，父组件总是通过 Props 向子组件传递数据。
  所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级
  prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

• 双向数据绑定
  
  利用Vue.directives监听model去修改dom
  
  利用Dom Listener监听view去修改model

8、为什么要跨域，跨域有哪些解决方式？

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
跨域解决方式：

• 设置document.domain解决无法读取非同源网页的 Cookie问题
• 跨文档通信 API：window.postMessage()
• CORS 是跨域资源分享。W3C 标准，跨源 AJAX 请求的根本解决方法
• JSONP(只接受get请求）
• webSockets
• window.name
  跨域详解

9、git有哪些命令？回滚是哪个操作？

git clone，git add，get commit，git push，git pull等
git revert（回滚）

10、rem与px如何换算

关于rem使用
一般移动端设计稿为6401136,（px）,假设我们设置html的font-size为10px即1rem=10px;我们以iphone5为浏览设备为标准制作，那么我们在切图写页面的时候，rem和px这个关系是怎样处理的呢？（注：iphone5分辨率为320568px）
答：假定我们从设计稿上切一张480px的图，我们的rem计算过程为：
320/640=1/2； //应该设置的尺寸占设计稿尺寸多少比例
480*（1/2）/10=480/20=24rem
总结公式：设计稿任意尺寸px*（设备屏幕px/设计稿尺寸px）/(font-size)；