2022年前端面试记录

150 阅读1分钟

元素垂直居中的方式,列举几种

  1. css3属性flex
.box {
    width: 600px;
    height: 600px;
    border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box .box-div {
    width: 200px;
    height: 200px;
    background-color: blue;
}
  1. css3属性vertical-align
.box {
    width: 600px;
    height: 600px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
}
.box .box-div {
    width: 200px;
    height: 200px;
    background-color: blue;
}
  1. absolute+translate
.box {
    width: 600px;
    height: 600px;
    border: 1px solid red;
    position: relative;
}
.box .box-div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: blue;
}
  1. absolute+margin
.box {
    width: 600px;
    height: 600px;
    border: 1px solid red;
    position: relative;
}
.box .box-div {
    position: absolute;
    bottom: 0;
    top: 0;
    width: 200px;
    height: 200px;
    margin: auto;
    background-color: blue;
}

闭包

闭包可以理解为定义在一个函数内部的函数,该内部函数持有对外部函数一个参数的引用,并把内部函数对象本身当做返回值,在外部函数执行后,该内部函数依然持有对该作用域的引用,而这个引用就是闭包。

在javascript代码中,也随处可见,定时器、事件监听器、ajax请求,只要使用了回调函数,实际上就是在使用闭包。

怎么触发vue内置组件keep-alive中的缓存组件

vue双向绑定原理

兼容问题

性能优化