前言

现在到了春招的黄金时期，本人和小伙伴们也都开始了面试，今天在这篇文章中记录我的第一个面试经历，不知道小伙伴们是否跟我一样，在第一次面试时都很紧张呢？

自我介绍

这边同时也借鉴我的一位小伙伴的介绍：我是谁+从哪里来+我做过什么+有什么成绩+为什么能胜任。

面试官您好，我叫xxx，某某大学25届软件工程专业，想来贵公司参前端岗位实习。平时热爱学习，课余时间也会打打篮球，参加各种社团俱乐部丰富自己的社交范围和兴趣爱好。在校被评为优秀学生，优秀班干部，拿过校级奖学金。个人比较喜欢前端，也用node写一些简单的后端代码。仔细读过《你不知道的Javascript》。同时，在学习前端知识的过程中，也会在掘金上写写JS系列基础和底层的文章，并是掘金的优秀创作者，掘金创作者等级五级，2023年度优秀作者No.37名。阅读过vue、axios、ElementPlus的源码，未来会持续学习。

CSS

标签有哪些

面试官让我说说html中常见的标签有哪些，我还以为我听错了，面试官重复了一遍说说出常见的几种就行，接下来我就随便回答几种

ul、li、p、a、img、button、h1-h6

css中选择器有哪些

1. 标签选择器
2. 类名选择器
3. id选择器
4. 后代选择器
5. 子级选择器
6. 相邻兄弟选择器
7. 群组选择器
8. 属性选择器
9. 伪类选择器
10. 伪元素选择器

什么是盒模型

浏览器在页面布局时，将所有元素表示为一个个矩形盒子，每一个盒子包含四个部分：content,padding,border,margin。

接下来我继续回答盒模型可以分为两种:

1. 标准盒模型： 在计算盒子宽度中，盒子总宽度为content + padding + border + margin
   
2. 怪异盒模型(IE)： 在计算盒子宽度中，盒子总宽度为content + margin
   

面试官又像我问到，如何将标准盒模型转换为怪异盒模型：box-sizing: border-box

css常见单位

1. px : 像素单位，屏幕上的发光点
2. rem ： 相对单位，相对于根字体大小
3. em : 相对单位，用于字体上会继承父容器的字体大小，用在它处，是相对于当前容器自己的字体大小来定的
4. vw/vh ：相对单位，相对于窗口宽高比
5. % ： 相对单位，相对于父容器

css中怎么隐藏页面元素，他们有什么区别？

1. display: none  脱离文档流  无法响应事件  回流重绘
2. visibility: hidden 占据文档流  无法响应事件  重绘
3. opacity: 0   占据文档流 响应事件  重绘 || 不重绘
4. position: absolute 脱离文档流   无法响应事件  回流重绘
5. clip-path: circle(0%)  占据文档流  无法响应事件  重绘

这里我们提到了回流重绘，可以继续跟面试官补充什么是回流和重绘

回流： 浏览器渲染页面之前需要对结构进行布局计算

重绘： 将已经计算好布局的容器绘制出来

回流必定发生重绘！！！

文本居中的方式有哪些

1. text-align: center
2. display: flex
3. display: grid
4. position: absolute

行内元素和块级元素有什么区别

1. 显示方式：

• 行内元素在同一行上显示，不会独占一行，多个行内元素会在同一行内水平排列。
• 块级元素会独占一行，即使宽度不够，也会换行显示。

2. 大小：

• 行内元素的宽度和高度由其内容决定，无法设置宽度和高度。
• 块级元素的宽度默认为其父元素的100%，可以通过设置宽度和高度来改变大小。

3. 内容模型：

• 行内元素只能包含文本或其他行内元素。
• 块级元素可以包含文本、其他块级元素或行内元素。

4. 盒模型：

• 行内元素的盒模型受 margin、padding 的上下左右均不生效，只有水平方向的 padding-left、padding-right、margin-left、margin-right 有效。
• 块级元素的盒模型中的 margin 和 padding 在上下左右都有效。

CSS中的常见动画有哪些

1. transition : 当其他属性值发生变更时，控制该值变更所花费的时间以及变更曲线
2. transform ： 用于做容器的旋转，平移，缩放，倾斜等动画
3. animation ： 控制容器动画的关键帧

JS系列

如何对数组去重

如果数组中只有原始数据类型，我们可以使用Set数据结构进行去重。

let arr = [1, 2, 2, 3, 4, 4, 5]
    let data = new Set(arr)
    let setData = Array.from(data)
    console.log(setData)

如果数组中有引用数据类型，那么就需要我们手写一个函数去进行去重。

数组里的迭代方法有哪些

1. forEach
2. map
3. filter
4. every
5. some
6. reduce

小伙伴们要分清这些方法的功能，这些方法接受的参数，还有这些方法是否会有返回值