2020前端面经

一.标签权重

二.BFC

BFC的布局规则

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
3. 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算。

如何创建BFC

1. 根元素或其它包含它的元素
2. float属性不为none的时候
3. overflow属性不为visible的时候
4. position属性为absolute或fixed的时候 / position的值不是static或者relative
5. display属性为inline-block、table-cell、table-caption、flex、inline-flex的时候

BFC的作用

1. 防止盒子间外边距margin重叠（margin合并）
2. 防止与浮动元素重叠
3. 包裹住浮动元素(解决margin塌陷)
4. 实现文本对图片的环绕效果
5. 清除浮动
6. 自适应两栏布局

总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

三.css_清除浮动的4种方式

float布局会脱离文档流，对页面的布局造成影响，比如造成父级的高度坍塌等问题。清除浮动后，便不会影响文档流。

1. 父级添加overflow: hidden；
子元素浮动了，会造成父元素的高度坍塌。只要给父元素添加overflow: hidden;属性，就可以解决浮动带来的影响。

<ul class="cc">
    <li></li>
    <li></li>
</ul>
<style type="text/css">
   ul {
        overflow: hidden;
        padding: 0;
        margin: 0;
        background: pink;
    }
    li {
        list-style: none;
        height: 100px;
        width: 100px;
        float: left;
        background: red;
        margin-left: 20px;
    }
</style>

2. 通过属性clear:both;达到清除浮动的目的；
元素浮动后，只需要在浮动元素添加多一个块级元素，并添加clear: both;属性，便可以达到清除浮动的目的。

<ul class="cc">
    <li></li>
    <li></li>
    <div style="clear: both;"></div>
</ul>
<style type="text/css">
    ul{
        background: pink;
    }
    li {
        list-style: none;
        height: 100px;
        width: 100px;
        float: left;
        background: red;
        margin-left: 20px;
    }
</style>

3. 通过给父级元素添加伪类after，达到清除浮动的目的；
这种方式也是使用clear: both;的方式达到效果，只是变相的使用了伪类after，使得页面结构更简洁，也是常用的清理浮动的方式。

<ul class="cc">
    <li></li>
    <li></li>
</ul>
<style type="text/css">
    .cc:after {
        content: '';
        height: 0;
        line-height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    ul{
       background: pink;
    }
    li {
       list-style: none;
       height: 100px;
       width: 100px;
       float: left;
       background: red;
       margin-left: 20px;
    }
</style>

4. 使用双伪类；

<ul class="cc">
    <li></li>
    <li></li>
</ul>
<style type="text/css">
    li {
        list-style: none;
        height: 100px;
        width: 100px;
        float: left;
        background: red;
        margin-left: 20px;
    }
    .cc:after,
    .cc:before {
        content: "";
        display: block;
        clear: both;
    }
    ul {
        background: pink;
    }
</style>

四.Flex布局

具体可以看原文章：30 分钟学会 Flex 布局

1. Flex布局是什么？

• Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

.container {
    display: flex | inline-flex;       //可以有两种取值
}

分别生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。
需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

2. 有下面六种属性可以设置在容器上，它们分别是：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

2-1. flex-direction: 决定主轴的方向(即项目的排列方向

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

1. row：默认值-主轴为水平方向，起点在左端
2. row-reverse：主轴为水平方向，起点在右端
3. column：主轴为垂直方向，起点在上沿
4. column-reverse：主轴为垂直方向，起点在下沿

2-2. flex-wrap: 决定容器内项目是否可换行

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

1. nowrap： 默认值不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
2. wrap：项目主轴总尺寸超出容器时换行，第一行在上方
3. wrap-reverse：换行，第一行在下方

2-3. flex-flow: flex-direction 和 flex-wrap 的简写形式

.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}

1. 默认值为: row nowrap，感觉没什么卵用，老老实实分开写就好了。这样就不用记住这个属性了。

2-4. justify-content：定义了项目在主轴的对齐方式。

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

建立在主轴为水平方向时测试，即 flex-direction: row

1. flex-start : 默认值flex-start 左对齐
2. flex-end：右对齐
3. center：居中
4. space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
5. space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。

2-5. align-items: 定义了项目在交叉轴上的对齐方式。

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

建立在主轴为水平方向时测试，即 flex-direction: row

1. 默认值为 stretch 即如果项目未设置高度或者设为 auto，将占满整个容器的高度。
2. flex-start：交叉轴的起点对齐
3. flex-end：交叉轴的终点对齐
4. center：交叉轴的中点对齐
5. baseline: 项目的第一行文字的基线对齐

2-6. align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用。

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

建立在主轴为水平方向时测试，即 flex-direction: row, flex-wrap: wrap

1. 默认值为 stretch
2. flex-start：轴线全部在交叉轴上的起点对齐
3. flex-end：轴线全部在交叉轴上的终点对齐
4. center：轴线全部在交叉轴上的中间对齐
5. space-between：轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。
6. space-around：每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍。

3.Flex 项目属性

1. order
2. flex-basis
3. flex-grow
4. flex-shrink
5. flex
6. align-self

大富大

1. order: 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0

.item {
    order: <integer>;
}

2. flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间

.item {
    flex-basis: <length> | auto;
}

3. flex-grow: 定义项目的放大比例

.item {
    flex-grow: <number>;
}

4. flex-shrink: 定义了项目的缩小比例

.item {
    flex-shrink: <number>;
}

5. flex: flex-grow, flex-shrink 和 flex-basis的简写

.item{
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
} 

6. align-self: 允许单个项目有与其他项目不一样的对齐方式

.item {
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

五.防抖节流

• 防抖函数：事件相应函数在一段时间后才执行，如果在这段时间内再次执行则重新计算，当预定的时间内没有再次调用该函数，则执行相应逻辑。

  应用场景：
  1.scroll滚动事件出发
  2.搜索框输入查询
  3.表单验证
  4.按钮提交事件
  5.浏览器窗口缩放，resize事件

• 节流函数：如果你持续触发事件，每隔一段时间只执行一次事件（一个函数执行一次后，只有大于设定的执行周期后再触发）

  应用场景：
  1.DOM元素的拖拽功能实现
  2.计算鼠标移动的距离
  3.射击游戏
  4.监听scroll滚动事件

六.闭包

• 彻底搞懂JS闭包各种坑
• 闭包

七.作用域和作用域链

• JS中的作用域和作用域链
• JS中的作用域和作用域链(原文)

八.Cookie、LocalStorage 与 SessionStorage的区别在哪里？

• 

九.行内元素和块级元素的区别有哪些？（最基础也最致命）

1. 常见行内元素和块级元素

   1.行内元素

   <span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>
   

   2.块级元素

   <address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>
   

2. display的block、inline和inline-block的区别

   1.block
   会独占一行，多个元素会另起一行，可以width、height、margin和padding属性

   2.inline
   元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不可以设置垂直方向的padding和margin

   3.inline-block
   将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内

3. 行内元素和块级元素的区别

   1.行内元素

   1：设置宽高无效
   
   2：对margin设置左右方向有效，而上下无效，padding设置都无效
   
   3：不会自动换行
   

   2.块级元素

   1：可以设置宽高
   
   2：设置margin和padding都有效
   
   3：可以自动换行
   
   4：多个块状，默认排列从上到下
   

十. var let const

4. var声明变量会挂载在widow上，而let和const声明的变量不会

   var a = 1;
   console.log(window.a);//1
   let b = 2;
   console.log(window.b);//undefined
   const c = 3;
   console.log(window.c);//undefined
   

5. var声明的变量存在变量提升，let和const不存在变量提升

   console.log(a);//undefined
   var a = 1;
   console.log(b);//报错
   let b = 2;
   console.log(c);//报错
   const c = 3;
   

6. let和const声明形成块作用域

   if(true){
   	var a = 1;
   	let b = 2;
   	const c = 3;
   }
   console.log(a);//1
   console.log(b);//报错
   console.log(c);//报错
   

7. 同一作用域下let和const不能声明同名变量，var可以声明同名变量

   var a = 10;
   console.log(a);//10
   var a = 100;
   console.log(a);//100
   
   const b = 11;
   console.log(b);// 11
   const b = 22;  // Identifier 'b' has already been declared  标识符“b”已声明
   console.log(b);//报错
   
   let c = 33;
   console.log(c) // 33
   let c = 44; // Identifier 'c' has already been declared  标识符“c”已声明
   console.log(c);//报错
   

   注意：const一旦声明变量必须赋值，也不能重新赋值
    	const PI = 3.141592653589793;
       PI = 3.14;      // 报错   Assignment to constant variable.
       PI = PI + 10;   // 报错
   但是：
   	复合类型的数据（对象和数组）：变量指向的是内存地址，保存的是一个指针，const只能保存这个指针地址是固定的，至于他指向的数据结构是不是可变的，就完全不能控制了。
       常量对象可以更改
           const car = {type:"porsche", model:"911", color:"Black"};
           car.color = "White";
           car.owner = "Bill";
       常量数组可以更改
           const cars = ["Audi", "BMW", "porsche"];
           cars[0] = "Honda";
           cars.push("Volvo");
       但是您无法重新为常量数组赋值：
           const names2=[1,4];
           names2=[6,7];   // /*出错，因为变量names2指向的地址不能发生改变，应始终指向[]所在的地址,[1,4]与[6,7]不是同一个地址*/
   

十一. 水平垂直居中的几中方法

<div class="par">
    <div class="child"> </div>
</div>

1. margin:auto法

   .par{
       width: 300px;
       height: 300px;
       position: relative;
       background-color: cadetblue;
   }
   .child{
       width: 100px;
       height: 100px;
       position: absolute;
       margin: auto;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: green;
   }
   

2. 负margin法

   .par{
       width: 300px;
       height: 300px;
       border: 2px solid #379;
       position: relative;
   }
   .child{
       width: 100px;
       height: 100px;
       background-color: #746;
       position: absolute;
       top: 50%;
       left: 50%;
       margin-top: -50px; /*height的一半*/
       margin-left: -50px; /*width的一半*/
   }
   

3. absolute+transform

   .par{
       width: 300px;
       height: 300px;
       position: relative;
       background-color: cadetblue;
   }
   .child{
       width: 100px;
       height: 100px;
       position:absolute;
       top:50%;
       left:50%;
       transform:translate(-50%,-50%);
       background-color: green;
   }
   

4. Flex

    .par {
         width: 300px;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: cadetblue;
     }
      .child{
          width: 100px;
          height: 100px;
          background-color: green;
      }
   

5. css3网格系统grid

   .par {
       width: 300px;
       height: 300px;
       background-color: cadetblue;
       display: grid;
   }
   
   .child {
       /* 5、不定宽高居中grid(兼容性不如flex 不推荐使用) */
       width: 100px;
       height: 100px;
       justify-self: center;
       align-self: center;
       background-color: green;
   }
   

十一. 浅拷贝深拷贝的区别

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，如果B没变，那就是深拷贝。

浅拷贝
1.Object.assign方法
2.直接用=赋值

深拷贝
1.JSON.parse(JSON.stringify()) ---------- 不能处理函数 会显示为undefined
2.采用递归去拷贝所有层级属性
3.lodash函数库实现深拷贝

两种可能
当value是基本数据类型，比如String，Number，Boolean时，是深拷贝
当value是引用类型的值，比如Object，Array，引用类型进行深拷贝也只是拷贝了引用地址，属于浅拷贝
+++++++++++
Array.prototype.concat() 数组的拷贝
Array.prototype.slice() 数组的拷贝
扩展运算符
Object.assign方法

十二. 理解WebSocket心跳及重连机制

心跳及重连机制

十三. px、em、rem、vh、vw的区别是什么？

px代表物理屏幕上能显示出的最小的一个点,
em 是相对于父级的字体大小,
rem是相对于HTML根元素的字体大小,
vh 和vw相对于视口的高度和宽度,1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度