面试2（没写完）

面试

一.怎么清除浮动

父元素没有高度，子元素有高度，然后还设置了浮动，父元素高度为0，他下边的盒子就顶上去了，和子元素重合

<div class="head clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="box"></div>

1.给父元素样式加一个

overflow: hidden;

2.添加一个额外的标签

//样式
.clearfix {
  clear:both
}
<div class="clearfix"></div>

3.单伪元素清除法

//样式
.clearfix ::after {
content:'';
display:block;
clear:both
}
 

4.双伪元素清除法

 .clearfix::before, .clearfix::after {
        content: "";
        display: table;
    }

    .clearfix::after {
        clear: both;
    }

二.盒子水平垂直居中

1.采用定位position的方式：父元素相对定位，子元素绝对定位；子元素：top值移动父元素高度的一般-子元素高度的一半 ；left值同

2.flex布局

       //父元素样式
       display: flex;
        justify-content: center;
        align-items: center;

3.用position定位加位移

 position: absolute;
        top: 100px;
        left: 200px;
        transform: translate(-50%,-50%);

3.Vuex

4.promise

5.防抖和节流

6.组件传值

7.js检测数据类型

1.typeof 用来检测基本数据类型，除了 typeof unll = object 其他都能检测出来

2.instanceof 用来检测引用数据类型，它的原理是检测构造函数的prototype属性是否在某个实例对象的原型上 返回值是布尔值

instanceof用来检测基本数据类型 返回的是flase

注意：null instanceof object 是false

​ typeof NaN= number

​ NaN instanceof Number false

8.http状态码

1. 200服务器请求成功（一般用于get和post请求）

2. 204 服务器成功处理，但是未返回内容

3. 301 网页被永久转移到了其他URL

4. 302 临时移动

5. 400 请求语法错误，服务器不理解

6. 404 请求的资源网页不在

7. 500内部服务器错误

9.v-if v-show

10.box-sizing

box-sizing属性：一种规定容器元素尺寸的计算方式

如果没有box-sizing属性，那么盒子的宽，就是width+ 2 * padding+2*border 其实就是默认的box-sizing：content - box

如果有box-sizing属性，那么盒子的contend 就变成了 width - 2 * padding -2 * border

11.路由的俩种模式

12.数组里面的方法

1. push 从最后边追加

2. pop 从最前面加

3. join和split方法 ：join将数组里面的元素拼接成字符串，split将字符串分割成数组

4. toString() 方法也是返回一个字符串

   const array1 = [1, 2, 'a', '1a'];
   
   console.log(array1.toString());
   // expected output: "1,2,a,1a"
   

13.set 和map

14.事件委托

15.闭包

16.浏览器存储数据

17.前端的哪个生命周期能访问到dom解构

18.前端性能优化

19.vue的响应式原理

20.深浅拷贝

21.跨域

22.get和post请求的区别