20K前端程序员的面试秘籍，学会Offer拿到手软

今年，大前端趋势已经愈发明显，层出不穷的跨平台技术，BATJ大厂均已布局小程序、移动端，拿offer须会多端开发。这些都在告诉我们，大前端的浪潮已经来了！

不少人问我到底什么是大前端，简单来说，大前端是一种变化形态多过于固定的职责范围，是“前端”职责范围的延伸。

说起大前端盛行后，所带来的影响已经初见端倪，企业开始缩减人力成本，前端岗位竞争越发激烈。一些自媒体也开始看衰移动端开发，“移动端饭碗要被抢了”，“听说原生开发没人要了”，这些言论频繁出现在各大社群中，给众多移动端程序员造成了极度的不安。

面试固然有技巧，但绝不是伪造与吹流弊，通过一段短时间沉下心来闭关修炼，出山收割，步入大厂，薪资翻番，岂不爽哉？

修炼原则

---

想必大家很厌烦笔试和考察知识点。因为其实在平时实战中，讲究的是开发效率，很少会去刻意记下一些细节和深挖知识点，脑海中都是一些分散的知识点，无法系统性地关联成网，一直处于似曾相识的状态。不知道多少人和博主一样，至今每次写阻止冒泡都需要谷歌一番如何拼写。🤪。

以如此的状态，定然是无法在面试的战场上纵横的。其实面试就犹如考试，大家回想下高考之前所做的事，无非就是 理解 和 系统性关联记忆。本秘籍的知识点较多，花点时间一个个理解并记忆后，自然也就融会贯通，无所畏惧。

由于本秘籍为了便于记忆，快速达到应试状态，类似于复习知识大纲。知识点会尽量的精简与提炼知识脉络，并不去展开深入细节，面面俱到。有兴趣或者有疑问的童鞋可以自行谷歌下对应知识点的详细内容。😋

CSS

================================================================

1. 盒模型

页面渲染时，dom 元素所采用的 布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为：

• content-box (W3C 标准盒模型)

border-box (IE 盒模型)

padding-box (FireFox 曾经支持)

margin-box (浏览器未实现)

Tips: 理论上是有上面 4 种盒子，但现在 w3c 与 mdn 规范中均只支持 content-box 与 border-box；

• BFC

• 块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

• IE下为 Layout，可通过 zoom:1 触发

• 触发条件:

根元素

position: absolute/fixed

display: inline-block / table

float 元素

ovevflow !== visible

• 规则:

属于同一个 BFC 的两个相邻 Box 垂直排列

属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠

BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)

BFC 的区域不会与 float 的元素区域重叠

计算 BFC 的高度时，浮动子元素也参与计算

文字层不会被浮动层覆盖，环绕于周围

• 应用:

阻止margin重叠

可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)

自适应两栏布局

可以阻止元素被浮动元素覆盖

3.层叠上下文

元素提升为一个比较特殊的图层，在三维空间中 (z轴) 高出普通元素一等。

• 触发条件

根层叠上下文(html)

position

• css3属性

• flex

transform

opacity

filter

will-change

-webkit-overflow-scrolling

• 层叠等级：层叠上下文在z轴上的排序

在同一层叠上下文中，层叠等级才有意义

z-index的优先级最高

4. 居中布局

• 水平居中

行内元素: text-align: center

块级元素: margin: 0 auto

absolute + transform

flex + justify-content: center

• 垂直居中

line-height: height

absolute + transform

flex + align-items: center

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】*

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。