面试题14. 实现div水平垂直居中 5. dispaly:none 和visibility：hidden的区别 7.

1.说一下弹性盒

首先我们要将display设置为flex，然后就是相应的属性

容器属性

flex-direction:方向
justify-content
align-items
flex-wrap：是否换行
flex-flow：direction和flex-wrap的合体
align-content：多跟轴线的对齐方式

项目属性

order：定义项目的排列顺序
flex-grow：项目的放大比例
flex-shrink：项目的缩小比例
flex-basis：分配多余空间之前，项目占据的主轴空间
flex：flex-grow，flex-shrink， flex-basis的合体
item-self：定义单个项目的class

2.你了解怪异盒模型吗

首先怪异盒模型是设置box-sizing：border-box，然后就是设置为怪异盒模型的元素在计算内容大小的时候，并不会将padding以及border加上即可

3.自适应宽度或者高度

方式一：可以使用vw以及vh来实现自适应高度
方式二：媒体查询

4. 实现div水平垂直居中

绝对定位：通过transform以及lef和top
绝对定位：

div {
    width:600px;   height: 600px;   background:red;   position: absolute;    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -300px;

}

绝对定位

div {
    width:600px;   
    height: 600px;   
    background:red;   
    position: absolute;    
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin-left: -300px;
    margin-top: -300px;

}

flex
table-cell

.table-cell {    display: table-cell;    vertical-align: middle;    text-align: center;    width: 240px;    height: 180px;    border:1px solid #666;}

5. dispaly:none 和visibility：hidden的区别

display被隐藏后，不会占用空间，visibility隐藏后，还会继续占用空间的

6.使用div+css的优点

符合w3c的标准
对浏览器和浏览者更具亲和力
页面加载速度更快
对于搜索引擎更加友好

7. 跨域的方式

jsonp
CORS跨域，通过服务器添加header("Access-Control-Allow-Origin": "*")
postMessage方法，第一个参数是具体的内容，第二个参数是接受消息的窗口的源，也可以设置为"*"

8. cookie和session的区别

cookie是存储在本地的，session是存储在服务器上的
cookie是可以设置过期时间的，而session是会话级别的，只要关闭窗口就消失
cookie是由大小限制的，最大是4kb，但是session没有限制的

9. 介绍一下vuex

首先是组件内部派发一个action，然后这个action传递给mutations，mutations接受到这个action执行响应的函数，修改状态，然后重新渲染组件