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,服务器可以主动向客户端请求,请求量小。