前端面试

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

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请求）webSocketswindow.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)；