前言

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

这是一家上海的小公司，工资200-250/天

自我介绍

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

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

CSS

标签有哪些

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

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

css中选择器有哪些

标签选择器
类名选择器
id选择器
后代选择器
子级选择器
相邻兄弟选择器
群组选择器
属性选择器
伪类选择器
伪元素选择器

什么是盒模型

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

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

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

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

css常见单位

px : 像素单位，屏幕上的发光点

rem ：相对单位，相对于根字体大小

em : 相对单位，用于字体上会继承父容器的字体大小，用在它处，是相对于当前容器自己的字体大小来定的

vw/vh ：相对单位，相对于窗口宽高比

% ：相对单位，相对于父容器

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

display: none 脱离文档流无法响应事件回流重绘

visibility: hidden 占据文档流无法响应事件重绘

opacity: 0 占据文档流响应事件重绘 || 不重绘

position: absolute 脱离文档流无法响应事件回流重绘

clip-path: circle(0%) 占据文档流无法响应事件重绘

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

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

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

回流必定发生重绘！！！

文本居中的方式有哪些

text-align: center

display: flex

display: grid

position: absolute

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

显示方式：
- 行内元素在同一行上显示，不会独占一行，多个行内元素会在同一行内水平排列。
- 块级元素会独占一行，即使宽度不够，也会换行显示。
大小：
- 行内元素的宽度和高度由其内容决定，无法设置宽度和高度。
- 块级元素的宽度默认为其父元素的100%，可以通过设置宽度和高度来改变大小。
内容模型：
- 行内元素只能包含文本或其他行内元素。
- 块级元素可以包含文本、其他块级元素或行内元素。
盒模型：
- 行内元素的盒模型受 margin、padding 的上下左右均不生效，只有水平方向的 padding-left、padding-right、margin-left、margin-right 有效。
- 块级元素的盒模型中的 margin 和 padding 在上下左右都有效。

CSS中的常见动画有哪些

transition : 当其他属性值发生变更时，控制该值变更所花费的时间以及变更曲线

transform ：用于做容器的旋转，平移，缩放，倾斜等动画

animation ：控制容器动画的关键帧

JS系列

如何对数组去重

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

js 复制代码

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

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

数组里的迭代方法有哪些

forEach

map

filter

every

some

reduce

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

记录我的小厂一面，请准备好水 (一）

前言