开通会员
1.水平垂直居中的几种方法
（1）. 水平居中
1. inlie元素：text-align:center
2. block元素：margin:auto
3. absolute元素：left:50%+margin-left:负的宽度的一半/translateX(-50%)
（2）. 垂直居中
1.inline元素：height等于line-height
2. absolute元素：top：50%，margin-top：负的高度的一半/translateY(-50%)
(3). 水平垂直居中
1. 元素固定宽高
利用定位+calc（position:absolute，top:calc(50% - 高度一半) ，left:calc(50% - 宽度一半)）
利用定位+margin负值（top:50%+margin-top:负的高度的一半,left:50%+margin-left:负的宽度的一半）
利用定位+margin:auto(position:absolute,top:0;bottom:0;left:0;right:0;)
利用定位+transform:translate(-50%,-50%)
flex布局：display:flex,justify-content:center align-item:center
grid布局：display:grid,justify-content:center align-item:center
2.css三角形的制作方法
1. 利用border(width和height设置为0，如果想让哪一边可见，就让那个边的对边设置为可见的颜色，其余的设置为透明)
2. 利用clip-path（clip-path: polygon(0 0, 0% 100%, 100% 50%);）
3. 利用background-image：通过linear-gardient来画三角形，background-position来调整位置，background-size来调整大小
3. flex的各种属性
flex的属性分为容器属性和项目属性
1.容器属性：flex-direction(设置主轴的方向),flex-wrap(控制是否折行)，justify-content(控制主轴的对齐方式)，align-items(控制侧轴的对齐方式) align-content(控制多行情况下，副轴的对齐方式)
2.项目属性：order(控制每个flex项目如何排序),flex-grow(控制当容器空间不足时项目的扩展比率，默认不扩展) flex-shrink(控制容器空间不足时项目的收缩比率，默认是1也就是空间不足时会收缩)，flex-basis(定义了项目的默认大小，默认是auto即参照本身的宽和高)
3: 常用flex:1(1即 1 1 auto 也就是有剩余空间时会自动扩展 没有剩余空间时会自动收缩 以本身的宽和高作为伸缩基准)
4.双飞翼和圣杯布局
三栏布局，两侧固定，中间内容随着宽度自适应
1. 使用float布局
2. 在两侧使用margin负值，移动两侧的块
3. 防止中间内容被覆盖，一个用padding另一个用margin
4. 圣杯布局用padding留空，使用margin-right移动右边的块，双飞翼使用margin留空，使用margin-left
5. tcp和udp，http和https
1. tcp是面向连接的，udp是无连接的，tcp是可靠的无差错的，udp是不可靠的，tcp是端对端传输，udp可以一对一、一对多、多对多，tcp有拥塞控制和流量控制，udp则没有这些机制，tcp是流式传输数据保证数据的顺序和完整性，udp则是一个包一个包发送容易乱序和丢包
2.http是明文传输，容易被劫持。故此有了https，https就是http+ssl/tls(后者是前者的标准版本)，https的基本过程就是首先客户端向服务端发送https请求，服务器先将含有公钥的密钥发送给客户端，客户端对证书进行合法性检测（递归），若不合法报https警告，若合法则在客户端生成一个用于随机加密的key，再用公钥加密后发送给服务端，服务端用私钥解密这个key，随后用这个key进行对称加密传输。
3.https的证书是为了解决中间人劫持的问题，关键就在于客户端不知道是不是服务端发送的请求，这个时候就需要证书了，证书一般是经过认证的机构颁发的。证书中含有数字签名，数字签名是用机构的私钥生成的，证书内包含公钥和哈希算法的实现，公钥用来解密数字签名，再用证书内的哈希算法来对明文部分进行哈希，结果和公钥解密出来的一样就说明是正确的。
6. 浏览器缓存
浏览器缓存的发展有一定的时间脉络，从时间上看是expires、cache-control到last-modified,etag这样，expires和cache-control是强制缓存，强制缓存的思路就是指定一个过期时间，在这个时间之前客户端都不需要向服务器请求资源，expires是过期日期，但是如果指定的是日期的话会产生一些问题，比如客户端和服务器时区不一样这样就会产生，实际已经过期但是客户端认为没有过期诸如此类的情况出现。为了解决这个问题，开始使用cache-control:max-age=xxx，规定还有多少秒过期，客户端可以根据自己的有效时间计算过期日期，但是这也有问题，就是这个cache-control只能精确到秒级，要是在一秒内多次改变那么就无法捕捉到，而且强制缓存本身也有问题，指定了过期日期但是在这之前服务器改变了资源，就无法知道，客户端和服务端存在一段时间的资源不同步情况。为此出现了协商缓存机制，协商缓存通过上次修改日期last-modified和etag文件版本号这两种，last-modified就是服务器响应客户端请求时会带上last-modified:xxx这个字段表示文件的最后修改时间，客户端再次请求时会带上If-modified-since:xxx来验证自从这个时间之后有无修改文件，如果修改了返回200和新的资源，没有修改返回304。问题是最后修改时间变了并不一定表示文件内容有改变，而且时间也是只能精确到秒级。这样就催生了etag的出现，etag就是文件的版本号，只有文件真正改变了才会改变，这样当第一次客户端向服务器请求时返回etag:xxx这个字段，当再发请求时就会带上if-none-match这个字段，如果版本号不一样说明文件修改了，返回200和新的资源，如果一样说明没修改，返回304。有强制缓存的时候用强制缓存，没有才用协商缓存expires和cache-control同时存在会用cache-control，last-modified和etag同时存在则请求时会同时带上if-modified-since和if-none-match。手动刷新那么强制缓存失效，强制刷新(ctrl+f5)那么强制缓存和协商缓存都会失效。
7.从输入url到渲染的过程
1.地址栏输入url按下回车
2.浏览器寻找该url是否存在缓存，并判断是否过期
3.开始进行DNS解析，将url和ip地址对应起来
4.建立tcp连接，三次握手
5.发送http请求
6.浏览器处理服务器的响应数据
7.浏览器渲染页面
8.关闭tcp连接，四次挥手
8.vue响应式的原理
vue的数据双向绑定主要是通过Object.defineProperty()和发布订阅模式结合实现的，通过劫持每个属性的getter和setter属性，在数据变动时发布消息给订阅者，从而调用相应的回调来更新视图。Object.defineProperty()会在一个对象上定义新的属性或者修改一个属性，第一个参数是要定义的对象，第二个参数是属性名，第三个对象是属性描述符。发布订阅模式是一种设计模式，发布者有添加订阅者和通知订阅者两种方法，当时机成熟时通知调用订阅者的回调函数以通知订阅者。
基本的流程是
1. 给需要监听的数据进行递归遍历加setter和getter，这样一旦数据变化就会触发setter
2. complie主要的作用是给每个指令对应的节点绑定更新函数，解析模板指令将模板中的变量更换成数据
3.dep监听变化，一旦有变化通知watcher，wachter再重新调用重新渲染的函数
9.简单描述一下websocket
websocket是全双工通信，是一种持久化协议，长连接通信，只需要建立一次tcp链接，以后的通信都通过这个连接，在握手阶段采用http，服务器可以主动向客户端请求，请求量小。
10.三次握手，四次挥手
三次握手
1. 客户端向服务器发送SYN报文
2. 服务器回应一个SYN+ACK报文
3. 客户端回应一个ACK报文
第一次确认客户端的发送和服务端的接收能力正常
第二次确认服务端的发送能力正常
第三次确认客户端的接收能力正常
四次挥手
1. 客户端发送一个FIN报文并跟上一个序列号，进入FIN_WAIT1状态
2. 服务器接收到这个报文进入CLOSE_WAIT状态，发送ACK报文，将序列号加1代表收到了请求，客户端进入FIN_WAIT_2状态
3. 当服务器也想关闭时，发送一个FIN报文并跟上一个序列号，服务器进入LAST_ACK状态，客户端进入TIME_WAIT状态
4. 客户端发送ACK报文并将序列号加一，tcp链接彻底断开，服务器进入CLOSED状态
本文摘自 ：https://www.cnblogs.com/