web前端面试题分为：html/css面试题、javascript面试题、vue面试题、性能优化面试题、网络方面面试题等等，那么在2022年，web前端面试题有哪些呢？
可以来小鹿线看看面试题视频https://xuexiluxian.cn/
第一章 面试题基础篇
1.1 HTML面试题
面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？
行内元素：span、img、input…
块级元素：div、footer、header、section、p、h1…h6…
空元素：br、hr…
​
​
元素之间的转换问题：
display: inline; 把某元素转换成了行内元素 ===>不独占一行的，并且不能设置宽高
display: inline-block; 把某元素转换成了行内块元素 ===>不独占一行的，可以设置宽高
display: block; 把某元素转换成了块元素 ===>独占一行，并且可以设置宽高
区别一：link先有，后有@import（兼容性link比@import兼容）；
区别二：加载顺序差别，浏览器先加载的标签link，后加载@import
title与h1的区别：
​
定义：
title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么
区别：
title他是显示在网页标题上、h1是显示在网页内容上
title比h1添加的重要 (title > h1 ) ==》对于seo的了解
场景：
网站的logo都是用h1标签包裹的
b与strong的区别：
​
定义：
b：实体标签，用来给文字加粗的。
strong：逻辑标签，用来加强字符语气的。
区别：
b标签只有加粗的样式，没有实际含义。
strong表示标签内字符比较重要，用以强调的。
题外话：为了符合css3的规范，b尽量少用该用strong就行了。
i与em的区别：
​
定义：
i:实体标签，用来做文字倾斜的。
em：是逻辑标签，用来强调文字内容的
区别：
i只是一个倾斜标签，没有实际含义。
em表示标签内字符重要，用以强调的。
场景：
i更多的用在字体图标，em术语上（医药，生物）。
区别一：
title ： 鼠标移入到图片显示的值
alt ： 图片无法加载时显示的值
区别二：
在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。
png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。
jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。
gif:一般是做动图的。
webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型
CSS的盒子模型区别：
标准盒子模型：margin、border、padding、content
IE盒子模型 ：margin、content（ border + padding + content ）
通过CSS如何转换盒子模型：
box-sizing: content-box; /标准盒子模型/
box-sizing: border-box; /IE盒子模型/
line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数行高）。
height是一个死值，就是这个盒子的高度。
CSS选择符：
通配（）
id选择器（#）
类选择器（.）
标签选择器（div、p、h1…）
相邻选择器(+)
后代选择器(ul li)
子元素选择器（ > ）
属性选择器(a[href])

CSS属性哪些可以继承：
文字系列：font-size、color、line-height、text-align…
***不可继承属性：border、padding、margin…
优先级比较：!important > 内联样式 > id > class > 标签 > 通配
CSS权重计算：
第一：内联样式（style） 权重值:1000
第二：id选择器 权重值:100
第三：类选择器 权重值:10
第四：标签&伪元素选择器 权重值:1
第五：通配、>、+ 权重值:0
用边框画（border）,例如：
{
width: 0;
height: 0;
​
border-left:100px solid transparent;
border-right:100px solid transparent;
border-top:100px solid transparent;
border-bottom:100px solid #ccc;
}

​ .container{ display: flex; justify-content: center; align-items: center; width: 300px; height: 300px; border:5px solid #ccc; } .main{ background: red; } ​ .container{ position: relative; width: 300px; height: 300px; border:5px solid #ccc; } .main{ position: absolute; left:50%; top:50%; background: red; transform: translate(-50%,-50%); } none 隐藏元素 block 把某某元素转换成块元素 inline 把某某元素转换成内联元素 inline-block 把某某元素转换成行内块元素 BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 ​ 1. 了解BFC ： 块级格式化上下文。 2. BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。 3. 如何触发BFC： float的值非none overflow的值非visible display的值为：inline-block、table-cell... position的值为:absoute、fixed 1. 触发BFC 2. 多创建一个盒子，添加样式：clear: both; 3. after方式 ul:after{ content: ''; display: block; clear: both; } 偶数 : 让文字在浏览器上表现更好看。 ​ 另外说明：ui给前端一般设计图都是偶数的，这样不管是布局也好，转换px也好，方便一点。 static [默认] 没有定位 fixed 固定定位，相对于浏览器窗口进行定位。 relative 相对于自身定位，不脱离文档流。 absolute 相对于第一个有relative的父元素，脱离文档流。 ​ ​ relative和absolute区别 1. relative不脱离文档流 、absolute脱离文档流 2. relative相对于自身 、 absolute相对于第一个有relative的父元素 3. relative如果有left、right、top、bottom ==》left、top absolute如果有left、right、top、bottom ==》left、right、top、bottom 双飞翼 reset.css 是一个css文件，用来重置css样式的。 normalize.css 为了增强跨浏览器渲染的一致性，一个CSS 重置样式库。 1. 是什么 把多个小图标合并成一张大图片。 2. 优缺点 优点：减少了http请求的次数，提升了性能。 缺点：维护比较差（例如图片位置进行修改或者内容宽高修改） 1. 占用位置的区别 display: none; 是不占用位置的 visibility: hidden; 虽然隐藏了，但是占用位置 ​ 2. 重绘和回流的问题 ​ visibility: hidden; 、 display: none; 产生重绘 display: none; 还会产生一次回流 ​ 产生回流一定会造成重绘，但是重绘不一定会造成回流。 ​ 产生回流的情况：改变元素的位置(left、top...)、显示隐藏元素.... 产生重绘的情况：样式改变、换皮肤 共同性：实现透明效果 ​ 1. opacity 取值范围0到1之间，0表示完全透明，1表示不透明 2. rgba R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间 ​ 区别：继承的区别 opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明属性。 延迟加载：async、defer 例如：

defer : 等html全部解析完成，才会执行js代码，顺次执行js脚本。
async : async是和html解析同步的（一起的），不是顺次执行js脚本（谁先加载完谁先执行）。
基本类型：string、number、boolean、undefined、null、symbol、bigint
引用类型：object
​
NaN是一个数值类型，但是不是一个具体的数字。
console.log( true + 1 ); //2
console.log( ‘name’+true ); //nametrue
console.log( undefined + 1 ); //NaN
console.log( typeof undefined ); //undefined
console.log( typeof(NaN) ); //number
console.log( typeof(null) ); //object

1. 作者在设计js的都是先设计的null（为什么设计了null：最初设计js的时候借鉴了java的语言）

2. null会被隐式转换成0，很不容易发现错误。

3. 先有null后有undefined，出来undefined是为了填补之前的坑。
   ​
   具体区别：JavaScript的最初版本是这样区分的：null是一个表示"无"的对象（空对象指针），转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
   == : 比较的是值

   string == number || boolean || number …都会隐式转换
   通过valueOf转换（valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。）
   ​
   === ： 除了比较值，还比较类型

4. js是单线程的语言。

5. js代码执行流程：同步执行完==》事件循环
   同步的任务都执行完了，才会执行事件循环的内容
   进入事件循环：请求、定时器、事件…

6. 事件循环中包含：【微任务、宏任务】
   微任务：promise.then
   宏任务：setTimeout…
   ​
   要执行宏任务的前提是清空了所有的微任务
   ​
   流程：同步==》事件循环【微任务和宏任务】》微任务》宏任务=》微任务…
   ​

7. 除了函数外，js是没有块级作用域。

8. 作用域链：内部可以访问外部的变量，但是外部不能访问内部的变量。
   注意：如果内部有，优先查找到内部，如果内部没有就查找外部的。

9. 注意声明变量是用var还是没有写（window.）

10. 注意：js有变量提升的机制【变量悬挂声明】

11. 优先级：声明变量 > 声明普通函数 > 参数 > 变量提升

12. 本层作用域有没有此变量【注意变量提升】

13. 注意：js除了函数外没有块级作用域

14. 普通声明函数是不看写函数的时候顺序
    function c(){
    var b = 1;
    function a(){
    console.log( b );
    var b = 2;
    console.log( b );
    }
    a();
    console.log( b );
    }
    c();
    var name = ‘a’;
    (function(){
    if( typeof name == ‘undefined’ ){
    var name = ‘b’;
    console.log(‘111’+name);
    }else{
    console.log(‘222’+name);
    }
    })()
    function fun( a ){
    var a = 10;
    function a(){}
    console.log( a );
    }
    fun( 100 );

15. 对象是通过new操作符构建出来的，所以对象之间不想等(除了引用外)；

16. 对象注意：引用类型(共同一个地址)；

17. 对象的key都是字符串类型；

18. 对象如何找属性|方法；
    查找规则：先在对象本身找 ===> 构造函数中找 ===> 对象原型中找 ===> 构造函数原型中找 ===> 对象上一层原型查找
    [1,2,3] === [1,2,3] //false
    var obj1 = {
    a:‘hellow’
    }
    var obj2 = obj1;
    obj2.a = ‘world’;
    console.log(obj1); //{a:world}
    (function(){
    console.log(a); //undefined
    var a = 1;
    })();
    var a = {}
    var b = {
    key:‘a’
    }
    var c = {
    key:‘c’
    }
    ​
    a[b] = ‘123’;
    a[c] = ‘456’;
    ​
    console.log( a[b] ); /