2019年前端求职面试题-主攻react

—新的一年结束了，开始了求职之路。以下是多家面试机构的提问集合。

1.css 相关的问题。

@1：盒子模型的理解

盒子是由自身的长宽高，加上padding和border加上margin。怪异盒模型加大padding和margin都不会改变自身的大小。正常盒模型加大padding和margin会改变自身的大小。

@2：浏览器的兼容问题

例如flex的兼容。
.box{

    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */   

 }

.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;       /* OLD - Firefox 19- */       
}

@3：未知宽高的盒子垂直水平居中的几种方案。

1.方法1使用弹性盒
.box{
    display:flex;
    justify-content:center;
    align-items:center;
}
2.方法2使用定位
.box{
    position:relative;
    
}
.son{
    position:absolute;
    lef:50%;
    top:50%;
    transform: translate(-50%，-50%);
}

@4：1px的解决方法

1，使用伪类处理1px像素问题。
.box{
    position: relative;
    border: none;
}

.box:after{  //  单边框
    content: '';
    position: absolute;
    bottom: 0;
    background: #DCDCDC;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.box:after{  //   四条边框
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

@5:  上下margin值叠加解决方案

1.给子元素一个float属性，就不会造成叠加。

2.给外层元素一个，overflow：hidden

3.子元素不用margin，给外层元素设置padding，来展示一样的效果。

4.分别在两个子元素之间加一个有高度的空标签。

@6：H5C3新特性总结

@7：移动端浏览器兼容

@8：浅谈video标签在移动端的运用

@9：rem的理解和计算公式

@10：css 过度和动画