最近参加了几场面试，总结一下面试题

1、用到了关于h5的哪些新特性？

答：a.h5新语义元素 header、footer、nav、aside、article、section、hgroup，作用：有利于代码可读性和SEO；

b、本地存储：h5提供了sessionStorage、localStorage和indexedDB加强本地存储。使用之前应该先判断支持情况try{}catch(){}关于存储自行理解；

c、表单新增功能：placeholder、autofocus还有type为email、number等

d、css3:CSS3提供了更多的选择器，before、after、first-child、nth-child。提供的效果包括box-shadow、text-shadow、background-size;还可以使用media-query实现响应式布局;css3动画等

2、如何让元素垂直水平居中？

a、知道具体宽高：

父级定位，子级定位，宽高300px

.container {

    position: absolute;

    left: calc(50% - 150px);

    top: calc(50% - 150px);

    width: 300px;

    height: 300px;

    border: 1px solid red;

}

或者

.container {

    position: absolute;

    left: calc(50% - 150px);

    top: calc(50% - 150px);

    width: 300px;

    height: 300px;

    border: 1px solid red;

}

 

 

b、不知道具体宽高：

.container {

    position: absolute;

    top: 50%;

    left: 50%;

transform: translate(-50%, -50%); // 自身宽度和高度的一半    

border: 1px solid red;

}

或者单位vh

.container {

    width: 300px;

    margin: 50vh auto 0;

    transform: translateY(-50%);

    border: 1px solid red;

}

C、Flex

.container {

    display: flex;

    height: 100px;

}

.inner {

    margin: auto;

}

或者

.container {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

}

D、Table

.container {

    display: table;         /* 让div以表格的形式渲染 */

    width: 100%;

    border: 1px solid red;

}

.inner {

    display: table-cell;    /* 让子元素以表格的单元格形式渲染 */

    text-align: center;

    vertical-align: middle;

}

3、如何实现布局左边固定宽度右边自适应？

a

.left{
width:200px;
float:left;

background:red;

}
.right{
overflow:hidden;

background:blue;
}

B、

.container{

display:flex;/*设为伸缩容器*/ 

}

.left{
width:200px;

border: 2px solid blue;

background:red;

}
.right{

border: 2px solid yellow;

flex:1;/*这里设置为占比1，填充满剩余空间*/ 

background:blue;
}

4、vue组件传值？

父传子：通过属性传值子接受props设置

子传父：通过$emit(事件名，参数)，在父上同时触发相应事件

非父子组件传值：bus总线和vuex链接https://blog.csdn.net/lander_xiong/article/details/79018737，vuex官方api查找

5、zepto和jq的区别？

https://www.cnblogs.com/colima/p/5289386.html写的还行

6、闭包

http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

7、面向对象例子？如何判断属性归属？原型原型链？

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

8、es6的常用属性？

https://www.cnblogs.com/guoxiao158/p/6133253.html总结的一般，需要更好的自行查找

9、几种数据存储方式？

https://blog.csdn.net/ruby_xc/article/details/65939988

10、小程序组件传值？

11、Localstorage设置过期时间？

12、Vue从一个页面刷到page5如何返回时候还是page5?

13、页面性能优化？