2024最新Web前端经典面试题及答案-史上最全前端面试题(持续更新)

HTML & CSS

盒子水平垂直居中方法

四种方式（常见）

1. 父元素相对定位，子元素绝对定位，将子元素的左上角通过op:50%和left:50%定位到页面的中心，然后再通过transform:translate负50%来调整元素的中心点到页面的中心

 .div {
     position:relative;
 }
 .div  .div{
        position: absolute;
        width: 200px;height: 200px;
        left: 50%;top: 50%;
        transform: translate(-50%, -50%);
}

2. 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况。

.div { 
      position: absolute;
      width: 200px;height: 200px;
      left: 0;right: 0;
      top: 0;bottom: 0;
      margin: auto;
   }

3. 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况。

.div {
        position: absolute;
        width: 200px;height: 200px;
        left: 50%; top: 50%;
        margin-left: calc(-200px / 2);
        margin-top: calc(-200px / 2);
}
4. 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。

```typescript
.div {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items:center;
      }

``

几种隐藏元素的方法

1. display: none;元素会变得不可见，并且不会再占用元素位置。会改变页面布局。
2. visibility: hidden;这个属性只是简单的隐藏某个元素，但是元素占用的空间仍然存在
3. opacity: 0; CSS3属性，设置0可以使一个元素完全透明，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
4. transform: scale(0);将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留。
5. z-index:负值；定位后利用z-index属性，将当前元素层级调到可见的元素之后，也能起到隐藏元素的作用
6. width:0；height:0;将元素的宽高置0

重绘与回流

重绘，简单来说就是重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。
回流，当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。

• 重绘不会引起dom结构和页面布局的变化，只是样式的变化，有重绘不一定有回流。
• 回流则是会引起dom结构和页面布局的变化，有回流就一定有重绘。
  不管怎么说都是会影响性能。

cookies sessionStorage和localstorage区别（常见）

相同点：都存储在客户端
不同点：

1. 存储大小

• cookie数据大小不能超过4k。

• sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2. 有效时间

• localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

• sessionStorage 数据在当前浏览器窗口关闭后自动删除。

• cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

• cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。