搞定大厂前端一面的必备知识_大厂一面基础知识包括-优快云博客

本文详细介绍了前端工程师面试的各个阶段及所需准备的内容，包括基础知识、面试流程、简历制作等，并深入探讨了HTML与CSS的关键概念。

一、关于面试

1.1 等级划分

想必大家肯定都不陌生，什么是前端工程师的等级。这是一个前端工作者的实例、技术成熟度的划分。往白了说，这个等级直接决定你银行卡里的位数，下面从等级和知识方面对此加以区分。

初级工程师

初级工程师——工作1-2年（应届生居多），这类工程师面试时会被着重考察基础知识，与其在校相关知识技能的考察，考察偏基础。
总结：面试时主要是基础

高级工程师

高级工程师——工作3-5年，这类工程师在面试时被考察方向主要是在项目经验这一块，要注意的是，基础知识仍是必不可少的，只是相对于初级工程师而言，基础知识相对减少考察频率。
总结：基础知识+项目经验

前端架构师

前端架构师——这个不好从工作时间上去定义，但绝大多数一定是有较长工作年限作为支撑的，主要看中的是解决问题与实现方案的能力，非常看重大局观与知识的全面性。带领团队的能力。
总结：架构能力+带队能力

1.2 关于基础

基础知识是一个前端工程师的自我修养。万丈高楼平地起，再高的建筑也离不开地基的支撑。基础知识的掌握程度，很大程度上决定了一个人之后的高度，尤其是在前端这个知识更新频繁的领域，基础显得更加的重要。基础知识的掌握程度，可以在我们学习新框架的时候让我们理解、接受的更加快速。JS更是前端的核心，所以JS的基础我们应定要牢牢掌握。

二、面试准备

2.1 什么是面试

面试是经过组织者精心设计的，考察应聘者是否符合要求的一次会面，主要以交谈和观察为手段，对面是这进行综合考量，对知识、经验、能力、性格的综合考察。
在面试时需要注意的是在抛开知识技术层面，在精神层面我们要保持乐观、积极、踏实。同事在仪表和穿着上也不要过于随意。

2.2 简历渠道

简历被HR拿到主要是三个渠道

员工内推（或得面试机会极大，基本直接一面，可以多去脉脉上看看）
猎头推荐（这种一般是个人自身价值极大）
HR收集（通过邮箱收集，平台收集）

2.3 面试流程

每个公司都有面试的不同标准，比如字节一般四面左右，且据说字节规定每一面的面试时间不应低于26分钟。
一面

主要就是基础面，考察基础知识为准

二面

很大可能是交叉面试，考察点从基础知识到框架原理到应用场景，始于基础，终于项目经验
交叉面试就是多个人分别面试，不同组的在职员工互相面试应聘者，但是都算二面。

三面

到了这一阶段，技术考察的比重直线下降，可能涉及一些项目经验。主要就是你要面试部门的主管对个这个人的综合审查，看是否符合公司的氛围，以及能为团队带来的东西。进本会问职业生涯规划。

HR面

这一面只要我们态度积极，不要带有不好的情绪，薪资范围合理就基本问题不大。

2.4 关于JD

2.4.1 JD分析

JD是一个用人单位发布的招聘信息
包含了岗位要求，职位描述，以便于面试者对自身做出考量是否合适
从JD中，我们能直接看到经验要求，工作内容，以及所需要的技术栈
同时，面试者应该着重了解岗位要求，完善所要求的知识技术，来提升自己通过面试的机会
要注意的是，我们也不必太过于在乎JD，一些公司的招聘要求是HR发的，HR对知识结构了解不全面以及和技术人员沟通不及时，所以会导致一些要求根本就是非必要的

2.5 如何写简历

简历就像我们的高考作文阅卷一样，被阅读时间非常短，所以我们在写简历时要内容简练，直击重点，表现出自己的优势。应包括如下：
个人信息

姓名、性别、邮箱、电话
年龄和头像无所谓，看个人（长得好看的小姐姐小哥哥会加分哟）

教育经历

写上最高学历即可，专业方向

专业技能

太基础的不要写（比如会VScode这种…）
写表现出核心竞争力的（比如了解源码这种）
要注意了解，熟悉、掌握、熟练掌握这种词的用法。否则可能被问到死。
内容不宜过多，5-8条就OK

工作经历

如实写
写明公司、职位，所负责内容就可

项目经验

写2-4个具有说服力的项目就好
项目描述：技术栈+个人角色+技术难点+怎么解决的

注意事项

不要过于花哨，简单明了即可
不要造假，会被拉入黑名单

面试前准备工作

看JD，是否需要临时准备一下
打印好纸质版简历，带好纸和笔
尽量带着电脑，可能手撸代码
注意面试时间，不要迟到，也不要过于早
穿着不随意
被问及为何离职，不要吐槽老东家，多找自身原因
被问能加班么？能——除非你自信的能有其他机会
不要挑战面试官，即使他错了
遇到不会的问题，要积极请教，表现出对知识的渴望

三、HTML与CSS

3.1 CSS——布局

3.1.1 盒模型宽度如何计算

在这里插入图片描述
答案：122px
知识点：

offsetWidth=content+padding+border 不包含margin
clientWidth=content+padding,不包含border
scrollWidth=content,不包含padding与border

3.1.2 margin 纵向重叠问题

在这里插入图片描述
答案：15px
知识点：

垂直方向相邻的两个元素的margin-top与margin-bottom会发生重叠情况，之间的距离取二者中较大的数据
空白内容会被直接重叠掉

3.1.3 margin负值问题

margin-left与margin-top设置负值，元素会分别向左、向上移动
margin-right设置负值，元素右侧元素向左移动，自身不受影响
margin-bottom设置负值，元素底部元素会向上移动，自身不受影响

3.1.4 BFC的理解与应用

Block Format Context ,块级格式化上下文
一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的条件

float不是none
poasition是absolute或fixed
overflow不是visible
display是flex或inline-block

3.1.5 圣杯布局

圣杯布局与双飞翼布局目的

三栏内容，中间部分最先渲染（内容最重要）
两侧内容固定，中间自适应
一般用于PC页面

圣杯布局与双飞翼布局总结

使用float
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被覆盖，一个用padding一个用margin

圣杯布局代码

HTML代码
注意顺序

 <div class="header">这是头部</div>
    <div class="main">
        <div class="content middle">我是中间</div>
        <div class="content left">我是左侧</div>
        <div class="content right">我是右侧</div>
    </div>
 <div class="footer">这是尾部</div>

CSS代码
在这里插入图片描述

3.1.6 双飞翼布局

在这里插入图片描述
HTML代码

在这里插入图片描述
CSS代码

在这里插入图片描述

3.1.7 手写clearfix

在这里插入图片描述

3.1.8 flex画色子

在这里插入图片描述
HTML代码

CSS代码

3.2 CSS -定位

3.2.1 absolute和relative分别依据什么定位

relative依据自身位置进行定位
absolute依据最近一层定位元素进行定位

3.2.2 居中对齐实现方式

水平居中

block元素：margin：0 auto；
inline元素：text-aligin: center;
absolute元素：left: 50%; margin-left: -宽的一半

垂直居中

inline元素： line-height=height的值
absolute元素：top:50%;margin-top: -50%;
absolute元素: top right left bottom都为0；margin： auto；
absolute元素：transform: translate(-50%,-50%);top:50%;left:50%;