web前端面试题总结

1.怎么让一个元素水平垂直居中
例子：<div class="wrapper"><div class="box"></div></div>
1）设置父元素flex，设置父元素justify-content（定义主轴对齐方式）和align-items（定义交叉轴对齐方式）为center
2）设置父元素display为flex，设置子元素margin为auto
3）设置父元素position为relative，子元素的position为absolute，子元素top，left，bottom，right为0（这个必须设置），margin设置为auto
4）设置父元素的position为relative,子元素的position为absolute，子元素的top和left为50%，transform的translate(-50%,-50%)

2.重排和重绘
改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”；完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。
重排必然带来重绘，但是重绘未必带来重排。
减少重排方法：1）切换类名；2）先用display为none隐藏元素（让元素脱离文档流），然后改变该元素，最后再让该元素显示，让它回到文档流中；3）使用文档片段创建一个子树，然后再拷贝到文档中；
（4）将原始元素拷贝到一个独立的节点中，操作这个节点，然后覆盖原始元素

3.盒子模型
分为W3C标准盒模型和IE盒模型（即怪异盒模型）；

W3C标准盒模型的width和height就是我们设置的content的宽度和高度；
盒子总宽度 = width（content）+padding(左右)+border（左右）+margin（左右）
IE盒模型的width = width（content）+padding（左右）+border（左右）
IE盒模型的总宽度 = width + margin（左右）
box-sizing属性为content-box时（默认为此），W3C标准盒模型；
box-sizing属性为border-box时（默认为此），怪异盒模型。

4.http协议和https协议
http是一个基于请求与响应的应用层协议，底层协议是TCP保证其可靠传输
http是一种C/S模式的协议，客户端发起请求，服务器接收请求并且处理然后做出响应
HTTP是80端口，HTTPS是443端口
在OSI网络模型中，HTTP处于应用层，HTTPS工作在传输层
HTTP是不安全的，HTTPS是安全的
HTTP的URL是以http://开头。HTTPS的URL是以https://开头
http不需要加密，https需要加密
https协议相比于http协议多了一层安全套接字

5.数组去重
1）定义一个新数组，并存放原数组的第一个元素，然后将原数组的元素和新数组的元素对比，若不同则存放在新数组中。
2）利用 ES6的set 方法
3）利用filter和indexof去重，filter的匿名函数中将数组当前对应的元素的第一次出现的下标和当前下标比较，如果相等就将它返回。

6.浏览器兼容性问题
因为各个浏览器的内核不同，对代码的解析也不同，所以会出现浏览器兼容性问题。
常见的浏览器兼容性问题：
1）不同浏览器的标签padding和margin不同
解决 ===> 使用CSS的通配符*，设置内外边距为0。
2）IE6的双边距问题（块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大（IE6双边距bug））
解决 ===> 在float标签样式控制中加入display:inline。

7.深拷贝和浅