前端面试，堪比费尽心思追女生...

写在前面

目录1

在阿里的朋友和我说，前端最近公司不景气是肯定的，这个行业的工资待遇都在降低，大厂还算有保障，但是大厂也不是没有缺点的。

所以为什么前端就业越来越难？

个人认为有以下三个原因：
✅首先要说的的确就是大环境，最近几年的就业环境不友好，很多企业都在大量裁员，导致岗位需求变少而从业人员过剩，大家都是有目共睹的；
·
✅其次是因为随着科技的进步和全球化竞争的加剧，行业要求更高、技术要求更复杂，导致岗位找工作难度加大。未来的前端开发不再局限于传统的网页开发，而是需要有更多的移动开发经验，同时也要求理解和掌握新一代前端技术，如React Native等，这给前端开发者带来了更高的技术难度，使得初学者要花费更多的时间和精力来追赶技术的发展；
·
✅最后就是招pin市场的任职要求，大家可以现在就打开某boss，有很多招人要求就是要有经验的大学生，但是大学生由于学校课程安排，又没有经验就只能通过实习获得经验，甚至现在有很多科班出身的为了加强自身的竞争力都开始报班精进技能，所以大家就只能开始不断学习，才能不被环境抛下。可以参考【点击此处】

进入正文

难，都难，难点好啊....

⾯试官：谈谈你对BFC的理解？

⼀、BFC

在⻚⾯布局的过程中，我们经常会遇到⼀些奇怪的情况，⽐如元素的⾼度消失了、两栏布局⽆法⾃适 应、元素间距出现异常等等。这些问题往往是由于元素之间相互影响⽽导致的。在这⾥，就涉及到了 BFC（Bl o c k Fo r m a t t i n g Co n t e x t）的概念。

BFC（块级格式化上下⽂）是⻚⾯中⼀块独⽴的渲染区域，具有⼀套独⽴的渲染规则：

内部的盒⼦会在垂直⽅向上⼀个接⼀个地放置。
同⼀个BFC的相邻盒⼦的m a r g in会发⽣重叠，与⽅向⽆关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。
BFC的区域不会与floa t的元素区域重叠。
计算BFC的⾼度时，浮动⼦元素也参与计算。
BFC是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素，反之亦 然。

BFC的⽬的是形成⼀个相对于外界完全独⽴的空间，使内部的⼦元素不会影响到外部的元素。

⼆、触发条件

触发BFC的条件包含但不限于：

根元素，即HTML元素
浮动元素：floa t值为l e ft、ri ght
ov e rflow值不为v isibl e，为auto、s c roll、hidden
displ ay的值为inline -block、inline -t abl e、t abl e - c e ll、t abl e - c aption、fle x、inline -
fle x、g rid、inline - g rid
position的值为absolut e或fix ed

三、应⽤场景

利⽤BFC的特性，我们可以在以下场景中应⽤BFC：

1. 防⽌margin重叠（塌陷）

在没有触发BFC的情况下，两个p元素之间的距离为1 0 0 p x，发⽣了m a r g i n重叠（塌陷）。通过给包含p元素的容器触发BFC，两个p元素不再属于同⼀个BFC，从⽽避免了m a r g i n重叠。

2. 清除内部浮动

通过触发p a r e n t元素⽣成BFC，可以清除内部浮动的影响，从⽽使p a r e n t元素具有⾼度。

3. ⾃适应多栏布局

在不触发BFC的情况下，. m a i n元素的左边会与.wr a p p e r元素的左边界相接触，从⽽⽆法实现两栏布局。通过触发. m a i n元素⽣成BFC，. m a i n元素的左边不再与.wr a p p e r元素的左边界相接触，从⽽实现⾃适应多栏布局。

⼩结

通过上⾯的例⼦，我们可以看到BFC的实际效果就是形成⼀个⻚⾯中的独⽴容器，⾥⾯的⼦元素不影响 外部的元素，反之亦然。BFC为我们解决了很多布局上的问题，提供了更灵活和可靠的布局⼿段。

面试官：CSS如何画⼀个三⻆形？原理是什么？

在CS S中，我们可以通过⼀些技巧来绘制简单的形状，包括三⻆形。绘制三⻆形的常⽤⽅法有两种：利 ⽤边框和利⽤伪元素。

利⽤边框绘制三⻆形

绘制三⻆形最简单的⽅法是利⽤元素的边框。我们可以通过设置元素的宽度和⾼度为0，并设置对应的 边框，然后隐藏不需要的边框，从⽽得到三⻆形的形状。

在这个例⼦中，我们设置了⼀个 tri a n g l e 类的元素，并且将其宽度和⾼度都设置为0。接着，通过 b o r d e r- w i d t h 属性设置边框的宽度为2 0 p x，并设置边框的颜⾊。我们在这⾥选择了⼀个红⾊的边框， 你可以根据需求设置不同的颜⾊。

b o r d e r- c o l o r 属性的四个值分别表示四个边框的颜⾊，它们的顺序是：上、右、下、左。在这⾥，我们 只让上边框显示出来，⽽其他三个边框设置为透明，从⽽形成⼀个三⻆形。

利⽤伪元素绘制三⻆形

除了利⽤边框，我们还可以利⽤伪元素来绘制三⻆形。伪元素可以在元素的内容前或内容后插⼊内容， 利⽤这个特性，我们可以在元素的 : : b e f o r e 或 : : a f t e r 伪元素中绘制三⻆形。

在这个例⼦中，我们同样创建了⼀个 tri a n g l e 类的元素，并将其宽度和⾼度都设置为0。然后，我们 在 : : b e f o r e 伪元素中插⼊⼀个空内容，并将其设置为绝对定位，使得它可以覆盖在 tri a n g l e 元素的上 ⽅。

接下来，我们通过设置伪元素的边框属性来绘制三⻆形，⽅法与之前的⽅法相同，只显示上边框，并将 其他三个边框设置为透明，形成三⻆形的形状。

原理

这两种⽅法的原理都是利⽤CS S的边框属性来绘制三⻆形。对于利⽤边框绘制三⻆形的⽅法，我们通过 将元素的宽度和⾼度设置为0，然后利⽤边框的特性来实现三⻆形的形状。⽽对于利⽤伪元素绘制三⻆ 形的⽅法，我们在元素的 : : b e f o r e 或 : : a f t e r 伪元素中插⼊⼀个空内容，并设置其边框属性来绘制三⻆形。

总结来说，绘制三⻆形的关键在于合理利⽤CS S的边框属性，通过设置不同边框的宽度和颜⾊，以及隐藏不需要的边框，来实现所需的形状。这样的技巧在实际开发中⾮常有⽤，能够减少额外的HT M L标记和图像资源的使⽤，从⽽提⾼⻚⾯性能和加载速度。

⾯试官：css选择器有哪些？优先级？哪些属性可以继承？

⼀、选择器

CS S选择器是CS S规则的第⼀部分 它是元素和其他部分组合起来告诉浏览器哪个HT M L元素应当是被选为应⽤规则中的CS S属性值的⽅式 选择器所选择的元素，叫做“选择器的对象” 我们从⼀个 H t m l 结构开始

关于 c s s 属性选择器常⽤的有：

i d选择器（# b o x），选择i d为b o x的元素
类选择器（. o n e），选择类名为o n e的所有元素
标签选择器（d i v），选择标签为d i v的所有元素
后代选择器（# b o x d i v），选择i d为b o x元素内部所有的d i v元素
⼦选择器（. o n e>o n e _ 1），选择⽗元素为. o n e的所有. o n e _ 1的元素
相邻同胞选择器（. o n e+. two），选择紧接在. o n e之后的所有. two元素
群组选择器（d i v, p），选择d i v、p的所有元素

还有⼀些使⽤频率相对没那么多的选择器：

伪类选择器

伪元素选择器

属性选择器

在 C SS3 中新增的选择器有如下：

层次选择器（p~ul），选择前⾯有p元素的每个ul元素

伪类选择器

属性选择器

⼆、优先级

相信⼤家对 C SS 选择器的优先级都不陌⽣：

到具体的计算层⾯，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如

下：

如果存在内联样式，那么 A = 1 , 否则 A = 0
B的值等于 ID选择器出现的次数
C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数
D 的值等于 标签选择器 和 伪元素 出现的总次数

这⾥举个例⼦：

套⽤上⾯的算法，依次求出 A B C D 的值：

因为没有内联样式 ，所以 A = 0
ID选择器总共出现了1次， B = 1
类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = ( 1 + 0 + 0 )
= 1
标签选择器出现了3次， 伪元素出现了0次，所以 D = ( 3 + 0 ) = 3

上⾯算出的 A 、 B 、 C 、 D 可以简记作： ( 0 , 1 , 1 , 3 )

知道了优先级是如何计算之后，就来看看⽐较规则：

从左往右依次进⾏⽐较 ，较⼤者优先级更⾼
如果相等，则继续往右移动⼀位进⾏⽐较
如果4位全部相等，则后⾯的会覆盖前⾯的

经过上⾯的优先级计算规则，我们知道内联样式的优先级最⾼，如果外部样式需要覆盖内联样式，就需

要使⽤ ! i m p o rt a n t

三、继承属性

在 c s s 中，继承是指的是给⽗元素设置⼀些属性，后代元素会⾃动拥有这些属性

关于继承属性，可以分成：

字体系列属性

⽂本系列属性

元素可⻅性

表格布局属性

列表属性

引⽤

光标属性

继承中⽐较特殊的⼏点：

a 标签的字体颜⾊不能被继承

h 1 - h 6标签字体的⼤下也是不能被继承的

⽆继承的属性

d is p l ay

⽂本属性：v e rt i c a l- a l i g n、t e x t- d e c o r a t i o n

盒⼦模型的属性：宽度、⾼度、内外边距、边框等

背景属性：背景图⽚、颜⾊、位置等

定位属性：浮动、清除浮动、定位p o si t i o n等

⽣成内容属性：c o n t e n t、c o u n t e r-r e s e t、c o u n t e r-i n c r e m e n t轮廓样式属性：o u t l i n e -st y l e、o u t l i n e -wi d t h、o u t l i n e - c o l o r、o u t l i n e

⻚⾯样式属性：si z e、p a g e - b r e a k - b e f o r e、p a g e - b r e a k - a f t e r

⾯试官：介绍⼀下grid⽹格布局

在现代We b开发中，⻚⾯布局是⼀个重要的任务，它决定了⽹⻚的结构和外观。在CS S中，我们通常使 ⽤F l e x b o x（弹性盒布局）和Gri d布局来实现不同的布局需求。本⽂将重点介绍Gri d布局，它是⼀种⼆维布局⽅式，通过纵横相交的⽹格线来创建布局结构，能够同时处理⾏和列，使得布局更加灵活多样。

⼀、什么是Grid布局？

Gri d布局，⼜称为⽹格布局，是⼀种强⼤⽽灵活的CS S布局模型。它通过在容器中创建⼀个⼆维⽹格，将⻚⾯划分为多个主要区域，并定义这些区域的⼤⼩、位置、层次等关系。与F l e x b o x的⼀维布局不 同，Gri d布局是⼀个⼆维布局，它在排列元素时不仅考虑主轴⽅向（⽔平或垂直），还考虑交叉轴⽅向，使得布局更加精确和直观。

要使⽤Gri d布局，我们需要将元素的 d i s p l a y 属性设置为 g ri d 或 i n l i n e - g ri d ，这样浏览器渲染引擎会启动⽹格布局算法。

⼆、Grid布局的属性

Gri d布局的属性分为容器属性和项⽬属性两类，我们逐⼀介绍。

容器属性：

1. grid-tem plate- colum ns 和 grid-tem plate-rows : ⽤于设置⽹格的列宽和⾏⾼。可以指定 固定的宽度和⾼度，也可以使⽤ repeat() 函数简化重复的值。

2. grid-gap ：设置⾏间距和列间距的简写属性，相当于同时设置 grid-row-gap 和 gridcolum n-gap 。

3. grid-tem plate-areas ：⽤于定义⽹格区域，将多个单元格组成⼀个命名区域，通过字符串 来表示。

4. grid-auto- flow ：⽤于指定项⽬的放置顺序，默认为 row ，即先⾏后列。可以设置 为 colum n ，使项⽬先列后⾏排列。

5. jus tif y -item s 和 al ign-item s ：分别⽤于设置单元格内容在⽔平和垂直⽅向上的对⻬⽅式。

项⽬属性：

1. grid- colum n- s tart 和 grid- colum n-end ：⽤于指定项⽬左边框和右边框所在的垂直⽹格线，定义项⽬在列⽅向的位置。

2. grid-row- s tart 和 grid-row-end ：⽤于指定项⽬上边框和下边框所在的⽔平⽹格线，定义项⽬在⾏⽅向的位置。

3. grid-area ：⽤于指定项⽬放置在哪⼀个命名区域。

4. jus tif y - self 和 al ign- self ：分别⽤于设置单元格内容在⽔平和垂直⽅向上的对⻬⽅式，只 作⽤于单个项⽬。

三、Grid布局的应⽤场景

Gri d布局在实际开发中有着⼴

泛的应⽤场景，以下是⼀些常⻅的应⽤示例：

1. ⽹格导航：通过⽹格布局可以轻松实现⽔平或垂直的⽹格导航菜单，使得导航链接整⻬排列。

2. 居中布局：通过设置容器的对⻬⽅式和项⽬的⾃身对⻬⽅式，可以实现内容在容器中的⽔平和垂直居中，使得布局更加美观。

3. 多栏布局：Grid布局可以轻松实现多栏布局，使得栏⽬的宽度相等或不等，适⽤于新闻列表、产品展示等场景。

4. ⾃适应布局：通过设置项⽬的放⼤和缩⼩⽐例，可以实现根据容器⼤⼩⾃适应调整布局，使得⻚⾯ 在不同屏幕尺⼨下都能良好展示。

5. 等⾼布局：通过设置项⽬的⾼度为 1 fr ，可以使得多个项⽬拥有相同的⾼度，适⽤于类似产品卡⽚ 的布局。

6. 响应式布局：在移动设备和桌⾯端的响应式布局中，Gri d布局表现优秀，可以在不同尺⼨的屏幕 上显示不同的布局，提升⽤户体验。

四、兼容性和使⽤建议

⽬前，Gri d布局在现代主流浏览器中具有良好的兼容性，⽀持情况如下：

综上所述，Gri d布局是⼀种功能强⼤、灵活多样的布局⽅式，它在We b开发中有着⼴泛的应⽤场景。在 实际开发中，我们可以灵活运⽤Gri d布局来实现各种复杂的⻚⾯布局需求，提升⽹⻚的可读性和⽤户体 验。然⽽，考虑到兼容性问题，建议在使⽤Gri d布局时，及时做好兼容性处理，以确保⽹⻚在不同浏览 器中都能正确显示和运⾏。希望本⽂能帮助读者深⼊理解Gri d布局，并在实际项⽬中应⽤得⼼应⼿！

⾯试官：元素⽔平垂直居中的⽅法有哪些？如果元素不定宽⾼呢？

⼀、背景

在开发中经常遇到这个问题，即让某个元素的内容在⽔平和垂直⽅向上都居中，内容不仅限于⽂字，可能是图⽚或其他元素居中是⼀个⾮常基础但⼜是⾮常重要的应⽤场景，实现居中的⽅法存在很多，可以将这些⽅法分成两个

⼤类：

• 居中元素（⼦元素）的宽⾼已知
• 居中元素宽⾼未知

⼆、实现⽅式

实现元素⽔平垂直居中的⽅式：

• 利⽤定位+ m a r g i n : a u t o
• 利⽤定位+ m a r g i n :负值
• 利⽤定位+tr a n sf o r m
• t a b l e布局
• fl e x布局
• g ri d布局

利⽤定位+margin:auto

先上代码：

⽗级设置为相对定位，⼦级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果⼦级没有设 置宽⾼，则会被拉开到和⽗级⼀样宽⾼ 这⾥⼦元素设置了宽⾼，所以宽⾼会按照我们的设置来显示，但是实际上⼦级的虚拟占位已经撑满了整 个⽗级，这时候再给它⼀个 m a r g i n：a u t o 它就可以上下左右都居中了

利⽤定位+margin:负值

绝⼤多数情况下，设置⽗元素为相对定位， ⼦元素移动⾃身5 0 %实现⽔平垂直居中

• 初始位置为⽅块1的位置
• 当设置l e ft、top为50%的时候，内部⼦元素为⽅块2的位置
• 设置m a r g in为负数时，使内部⼦元素到⽅块3的位置，即中间位置

这种⽅案不要求⽗元素的⾼度，也就是即使⽗元素的⾼度变化了，仍然可以保持在⽗元素的垂直居中位 置，⽔平⽅向上是⼀样的操作 但是该⽅案需要知道⼦元素⾃身的宽⾼，但是我们可以通过下⾯ tr a n s f o r m 属性进⾏移动

利⽤定位+transform

实现代码如下：

tr a n s l a t e (- 5 0 % , - 5 0 % )将会将元素位移⾃⼰宽度和⾼度的- 5 0 %

这种⽅法其实和最上⾯被否定掉的m a r g i n负值⽤法⼀样，可以说是 m a r g i n 负值的替代⽅案，并不需要 知道⾃身元素的宽⾼

table布局

设置⽗元素为 d i s p l a y : t a b l e - c e l l ，⼦元素设置 d i s p l a y : i n l i n e - b l o c k 。利⽤ v e rt i c a l 和 t e x t- a l i g n 可以让所有的⾏内块级元素⽔平垂直居中

flex弹性布局

还是看看实现的整体代码：

c s s 3 中了 fl e x 布局，可以⾮常简单实现垂直⽔平居中

这⾥可以简单看看 fl e x 布局的关键属性作⽤：

• d is p l ay : fl e x时，表示该容器内部的元素将按照fl e x进⾏布局
• a l i g n -i t e m s: c e n t e r表示这些元素将相对于本容器⽔平居中
• j u st i f y - c o n t e n t : c e n t e r也是同样的道理垂直居中

grid⽹格布局

这⾥看到， g ir d ⽹格布局和 fl e x 弹性布局都简单粗暴⼩结

上述⽅法中，不知道元素宽⾼⼤⼩仍能实现⽔平垂直居中的⽅法有：

• 利⽤定位+ m a r g in: auto
• 利⽤定位+tr ansform
• fle x布局
• g rid布局

三、总结

根据元素标签的性质，可以分为：

• 内联元素居中布局
• 块级元素居中布局

内联元素居中布局

⽔平居中

• ⾏内元素可设置：t e x t- a li gn: c ent e r
• fle x布局设置⽗元素：displ ay : fle x ; justif y - cont ent: c ent e r

垂直居中

• 单⾏⽂本⽗元素确认⾼度：he i ght === line -he i ght
• 多⾏⽂本⽗元素确认⾼度：displ ay : t abl e - c e ll; v e rti c a l- a li gn: m iddl e

块级元素居中布局

⽔平居中

• 定宽: m a r g in: 0 auto
• 绝对定位+l e ft:50%+ m a r g in:负⾃身⼀半

垂直居中

• position: absolut e设置l e ft、top、m a r g in-l e ft、m a r g in-top(定⾼)
• displ ay : t abl e - c e ll
• tr ansform : tr ansl a t e ( x , y )
• fle x (不定⾼，不定宽)
• g rid(不定⾼，不定宽)，兼容性相对⽐较差

结尾

前端面试大环境很难，想要在五月找到工作，首先简历上的修改，和项目上的描写，这是能获取面试的方式，

然后需要针对项目 面试题 还有场景题，算法之类的都要下功夫，这方面可以【点击此处】

希望各位能够在6月前拿到offer，以后跳槽也要注意。