可能很多人觉得大前端这个概念很新，但其实这个概念已经有好几年了。2017年，以饿了么为代表的一些公司开始提出大前端的概念。2018年，InfoQ举办了首届全球前端技术大会（GMTC），会上针对前后端分离、跨平台和PWA技术设置了专场。在去年5G的趋势下，前端岗位的内涵和外延不断拓展。今年大前端趋势越来越明显，跨平台技术层出不穷。BATJ主要厂商已经布局了小程序和移动端。要获得offer，你必须能够在多个终端上进行开发。这一切都在告诉我们，前端大潮来了！很多人问我什么是大前端。简单来说，大前端是形式上的变化，而不是固定的职责范围，是“前端”职责范围的延伸。说到大前端的盛行，影响已经开始显现。企业开始降低人力成本，前端岗位竞争日趋激烈。一些自媒体也开始看不起移动端开发，“移动端饭碗会被抢”、“听说没人要原生开发”，这些言论频频出现在各大社区，让不少移动端程序员极度不安.面试当然有技巧，但绝对不是伪造或夸大。短暂的安顿下来，闭关修炼，出去收获，进大厂，工资翻倍，岂不是很好？实践的原则一定是大家都很厌倦笔试和查知识点。因为其实在实战中，重要的是开发效率。很少刻意记下一些细节，深挖知识点。脑子里有一些零散的知识点，无法系统地链接成一个网络。我一直处于熟悉的状态。状态。我不知道有多少人像博主一样，每次写文章都要谷歌如何拼写才能停止冒泡。？。这样的状态，是绝对不可能在面试的战场上的。事实上，面试就像考试。回想高考前的所作所为，无非就是理解和系统的联想记忆。这本秘籍中有很多知识点。花一些时间去理解和背诵每一个，你自然会掌握它并且无所畏惧。由于本秘籍简单易记，快速达到应试状态，类似于复习知识大纲。知识点会尽量精简细化，不扩大细节面面俱到。有兴趣或者有疑问的童鞋可以谷歌对应知识点的详情。?CSSBoxModel渲染页面时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下布局可以通过zoom:1触发条件：根元素位置：absolute/fixeddisplay:inline-block/tablefloatelementovevflow!==visiblerule:垂直排列的两个相邻的Boxes属于同一个BFC属于同一个BFC的两个相邻框的外边距会与BFC中子元素的外边距框的左侧重叠，并与包含块（BFC）的边框框的左侧相触（子元素absolute除外）。BFC的区域不会和浮动的元素区域重叠计算BFC的高度时，浮动的子元素也参与计算。文字层不会被浮层覆盖，会环绕应用：防止margin重叠，可以包含浮动元素——clearinternalfloating（清除浮动的原理是两个div都在同一个BFC区)自适应两列布局可以防止元素被浮动元素覆盖。3.堆叠上下文元素提升为特殊层，在三维空间（z轴）高于普通元素。触发条件rootstackingcontext(html)positioncss3属性flextransformopacityfilterwill-change-webkit-overflow-scrollingstackinglevel:stackingcontext在z轴上的排序只有在stackinglevel与z-index有相同的stackingcontext时才有意义最高优先级居中布局水平居中内联元素：text-align:center块级元素：margin:0autoabsolute+transformflex+justify-content:centerverticallycenteredline-height:heightabsolute+transformflex+align-items:centertable水平垂直居中absolute+transformflex+justify-content+align-items选择器优先级！important>inlinestyle>#id>.class>tag>*>inheritance>defaultselectorparsesfromrighttoleft6.通过添加尾部元素去除浮动效果，防止父级高度塌陷清除浮动：在/之后：clear:bothCreateparentBFCparentsetheight7.link和@import的区别link有更多的功能，可以定义RSS，定义Rel等，而@import只能在解析的时候用来加载css链接的时候到达，页面会同步加载引用的css，直到页面加载完才会加载@import引用的css。@import需要IE5以上才能使用链接，可以用js动态导入。@import不起作用CSS预处理器（Sass/Less/Postcss的原理）CSS预处理器：是通过Webpack编译，将CSS-like语言转换成浏览器可读的真正CSS。在这一层编译之上，CSS可以被赋予更强大的功能，常用功能：嵌套变量、循环语句、条件语句、自动前缀单元转换、mixin复用。面试的时候一般不会重点关注这一点。一般在实战项目中的经验就可以自我介绍了~9。CSS动画transition：过渡动画transition-property：属性transition-duration：intervaltransition-timing-function：curvetransition-delay：delaycommonhooks：transitionendanimation/keyframesanimation-name：动画名称，对应@keyframesanimation-duration：intervalanimation-timing-function:curveanimation-delay:delayanimation-iteration-count:timesinfinite:循环动画animation-direction:directionalternate:reverseplaybackanimation-fill-mode:staticmodeforwards:停止时，保持最后一帧backward:当stopping,returntofirstframeboth:同时使用forwards/backwards常用hooks:animationend动画属性：动画尽量使用animation属性，可以有更好的表现。并不是重点考察的领域，但这其实是国内行业对CSS缺乏关注所致。真正精通CSS的团队和人才并不多。因此，如果能在CSS领域有自己的见解和经验，将是一笔可观的加分，脱颖而出。
