2022前端面试题汇总（更新中）

最新推荐文章于 2022-07-18 21:00:57 发布

m0_54853146

最新推荐文章于 2022-07-18 21:00:57 发布

阅读量447

点赞数 1

分类专栏：前端 html 文章标签： npm 前端 node.js

本文链接：https://blog.csdn.net/m0_54853146/article/details/123243818

版权

本文汇总了2022年前端面试的重要知识点，包括HTML+CSS中的居中布局、BFC原理及其应用，JS+ES6的变量声明、数据类型检测以及数组操作，浏览器与HTTP的存储机制，Vue的生命周期、组件通信和路由模式，以及前端性能优化策略等。深入理解这些概念，将有助于提升前端面试成功率。

摘要由CSDN通过智能技术生成

【HTML + CSS】

一、CSS实现元素水平垂直居中

① 绝对定位的居中实现

-- 已知宽高 --
 width:100px;
 height:100px;
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-50px; /*宽度的一半*/
 margin-top:-50px; /*高度的一半*/

-- 未知宽高 --
 position:absolute;
 left:50%;
 top:50%;
 transform: translate(-50%,-50%);

② margin: auto; 实现绝对定位元素的居中

 position: absolute;
 left:0;
 right:0;
 top:0;
 bottom:0;
 margin:auto;

③ flex弹性布局

 display:flex;
 justify-content:center;
 align-items:center;

④ 水平居中+垂直居中+行高

 text-align:center;
 vertical-align:middle;
 line-height:与高度一致;

二、什么是BFC BFC可以解决哪些问题

BFC是块级格式化上下文，可以把BFC理解为一个封闭的大盒子，内部的元素不会影响到外部。

BFC 特性及应用：
① 解决margin叠加的问题
比如：当页面上的两个div，一个设置了下边距，一个设置了上边距，这个时候由于两个div处于同一个BFC容器下，上下边距会发生重叠，取较大的值作为边距，这也是CSS的一种规范。如果想避免外边距折叠，可以将其放在不同的 BFC 容器中，并设置overflow:hidden;

② 可以阻止元素被浮动的元素覆盖（避免文字环绕）
比如：页面上两个div，给其中一个div设置浮动后会脱离标准文档流，这个时候第二个div有一部分会被浮动的div覆盖，如果想避免元素被覆盖就可以在第二个元素中加入 overflow: hidden;

③ 用于清除浮动
当给元素设置浮动后会脱离普通文档流，这个时候如果外部的元素没有设置高度，高度则为0，如果触发了容器的BFC，设置overflow:hidden;那么容器将会包裹浮动的元素

三、flex布局
flex布局教程-阮一峰

flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis<