前端面试题： 吊打面试官！

css

css选择器：

bfc:

（猿辅导）
css 中的盒模型，怎么切换

flex布局的理解，居中的方式

[答: ]
我们传统的布局方式是基于在盒子模型下的，依赖于display属性的，position属性的或者是float属性的，但是在传统的布局上面并不好布局;
Flex 容器有如下6个属性

flex-direction :该属性决定主轴的方向(即项目的排列方向)。row从左到右，row-reverse相反，column从上到下，column-reverse相反

flex-wrap：控制伸缩容器是单行还是多行，nowrap默认单行显示不换行，wrap换行,第一行在上方，wrap-reverse伸缩容器多行显示，第一行在下方

flex-flow：该属性是flex-direction伸缩项目主轴方向属性和flex-wrap 换行属性的简写形式

justify-content：定义伸缩项目在主轴上的对齐方式 center，flex-start/end，space-between两端对齐

align-items： 伸缩项目在y轴对齐方式，主轴x轴，交叉轴就是y轴， justify-content和align-items是一对，前者分别定义主轴和侧轴的 方向，后者分别定义主轴和侧轴中项目的 对齐方式

align-content：调准伸缩行在伸缩容器里的对齐方式，flex-start交叉轴起点对齐 flex-end交叉轴终点对齐。center交叉轴中点对齐

清除浮动

方法一：使用带clear属性的空元素
在浮动元素后使用一个空元素如

.clear{clear:both;}。属性即可清理浮动
方法二：使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;
方法三：使用CSS的:after伪元素
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动
.clearfix:after{ display: block; height: 0; clear: both; visibility: hidden; }

解释下css3 的 Flexbox ( 弹性盒布局模型） 以及适用场景？

css 中动画的相关属性 （ 红包雨的实现）

css3新属性动画 animation，和摇骰子动画类似

加css transation样式，trasation 里面加 animation 定义执行动画的轨迹和时长，

具体介绍下红包雨的实现方式

@keyframes
0% {
transform: translateY(-300px);
-ms-transform:translateY(-300px);
-webkit-transform:translateY(-300px);
}

JavaSctipt

（美团 start）

重绘 和 重排

参考https://segmentfault.com/a/1190000016990089

什么适合重绘

callback 改写成 promise

参考实例 https://blog.csdn.net/fuweilian1/article/details/78965783
https://www.jianshu.com/p/8fd80c368570
【答】

把传统的callback回调改写成es6中promise风格

1.传统的callback回调方式

let callFn = (arg1,arg2,cb)=>{
   //如果arg1>arg2回调正常，否则回调错误信息
    setTimeout(function(){
   
        if(arg1>arg2){
   
            cb(null,arg1+arg2);
        }else{
   
            cb(new Error('err'),null);
        }
    },5000);
}

//调用
callFn(1,2,function(err,data){
   
    if(err){
   
        //错误处理
    }else{
   
        //正确处理
    }
});

2.使用es6来写上面的功能

let promiseFn = (arg1,arg2)=>{
   
    return new Promise((resole,reject)=>{
   
        if(arg1>arg2){
   
            resole(arg1+arg2);
        }else{
   
            reject(new Error('err'));
        }
    }); 
};

//调用
promiseFn(1,2).then(data=>{
   
    //正确处理
}).catch(err=>{
   
    //错误处理
});