当前位置: 首页 > Web前端 > CSS

前端CSS面试大纲

时间:2023-03-31 13:46:28 CSS

背景参加厦门第四届CSSConf后,对CSS有了新的思考。CSS是前端必须掌握并保持持续关注的技术,但我不想在CSS上花费太多精力,因为通常会有比写CSS更重要的工作在等着我。听起来很矛盾,不花太多精力就能掌握,人都是懒惰的,但这正是我想要的。所以我想抱着“高效功利”的态度来学习CSS,主要基于以下两点:前端技术体系太多,不可能掌握每一种技术。可预见的未来)对你来说最有价值的东西,以及对CSS的关注,我觉得大致可以分为三类:出于对CSS技术和Geek精神的热爱,出于工作需要学习钻研,以及Codingto准备面试目前对于CSS,我属于后两类。这篇文章的目的是:让你在工作中顺利使用CSS,换工作时也能写出“熟练使用CSS,熟悉W3C标准”,成功应对面试。下面我就结合自己的学习经历和面试经历进行分析。刚开始学习CSS的时候,我从图书馆借了很多CSS书籍。有的写的很笼统,看完觉得很费力气。所以在这里我尝试提出一条捷径:如果你是前端新手,我建议先阅读《Head First HTML与CSS(第2版)》,HeadFirst系列非常适合初学者;如果你是前端入门,推荐你阅读《CSS 权威指南(第3版)》,巩固你对CSS2.1的认识;虽然不能100%保证你真的会精通,但会加深你的理解;最后,不管你现在是什么段位,都去看看《CSS 揭秘》吧。之后你可以选择继续阅读其他书籍,但我个人不建议花费这种精力。因为学习了以上书籍,你已经对CSS有了系统的了解,而其他书籍会有一定的重叠,获益不大,而且书中的技术大多已经过时。更好的做法是关注业内知名博客(如w3cplus)和业内CSS专家,如张新旭、一丝沙漠等,他们是活教材。另外,订阅CSSWeekly邮件推送,每周关注最新技术。只需选择一种饲料。太多的话会分散你的精力,因为CSS技术只是前端大技术体系中的一小部分。当然,仅仅做到这一点是不够的。如果你想更全面地理解CSS,你就不得不阅读W3CCSS相关规范。但是规格太多,无法阅读所有规格。我们的目标是精通,不是精通,所以只挑重要的,比如:CSS2.1CSSBasicUserInterfaceModuleLevel3(CSS3UI)CSSValuesandUnitsModuleLevel3CSSBackgroundsandBordersModuleLevel3CSSImageValuesandReplacedContentModuleLevel3CSSFlexibleBoxLayoutModuleLevel1CSSGridLayoutModuleLevel1CSSCustomPropertiesforCascadingVariablesModuleLevel1其中以CSS2.1最为重要,也有中文版本,其他的可以通过作为补充。大纲列在这里:https://www.w3.org/TR/CSS/大家可以选择自己感兴趣的,有的是很有意思的。如果实在受不了,就啃2.1吧,工作和面试应该够用了(当年认识阿里的时候看2.1,面试官只要问CSS就很开心)。我们的目标是熟练,而不是熟练。当你对CSS有了系统的了解后,你只需要关注它。不用担心掉队,因为你关注的大佬肯定会发给你(或者最新的二手)信息。至此,理论知识已经OK了。如果你真的仔细看了上面的规范,你可以说你在CSS方面已经超越了大多数人甚至面试官。趁机吹一波应该是没问题的,但是实践部分也要先准备一次。比如CSS预处理器、组件化、工程化、兼容性处理等等,这些主要是根据自己的开发经验+业界流行的技术方案来准备的。工作主要靠谷歌,面试的时候最好有相关案例,比如写我在某个项目优化了CSS,成功减少了60%的CSS总量,很吸引眼球.不过在开始说面试之前,我想提出一个概念——学霸面试模式:学校学习和公司工作有很多相似之处。平时我们都是在完成老师(公司)布置的作业(要求)。其实在做作业(requirements)的时候,我们可以在谷歌百度上线下交流学习,但是考试(面试)是闭卷的,除了少数几门课程敢裸考。另外,考试(面试)前一般都需要复习。我觉得程序员如果现在直接再面试,可能在自己公司面试都过不了,但是这样是没有意义的。必须给学生充足的准备时间。而且你会发现,学霸总是和大师惊人的相似。他们平时上课(工作)积极思考,帮助其他同学回答问题。他们很受老师(老板)的欢迎。他们是考试前最快乐的(跳槽)。他们往往是考试(入职)后成绩最好(薪水最高)的人。所以面试的时候,请参考你们上学时班级尖子生的架势。当然,这个概念的名字是我瞎取的。完成以上工作后,如果面试官问CSS相关的问题,大概率会给你加分,但记得写“精通”,不要写“精通”。你永远不会知道对面的面试官是什么CSS水平。CSS备考完成以上过程后,你就已经对CSS有了一个全面的知识体系,剩下的就是围绕重点问题,准备备考了。刷题的目的不是题目本身,而是梳理知识脉络,因为面试官不会简单的问你固定的问题,所以切记在没有系统了解CSS的情况下不要刷题(这个是同一个道理考前跟学霸学,考前赶),所以就算能过也得不到高分(面试高分==高薪,重点圈)。因此,复习非常重要。不要裸体考试。关系到薪水,责任重大。而当你的知识系统化之后,你会发现下注题目是非常容易的,只要你根据spec画出重点,我会把它分为理论和实践两类:Theorywhatisthe制定CSS标准的过程??(理解标准)如何计算CSS层叠样式的优先级?(考察级联的顺序和important的影响)CSS的选择器有哪些?如何计算优先级?(基础题,答错)CSS给元素属性赋值的详细过程?(指定值-计算值-应用值-实际值)CSS的单位和含义是什么?(结合dpradaptation/responsiveness提问)CSS盒模型的理解?(继续展开marginmerge、block-levelbox和linebox)CSS是如何处理文档流的?(正流、浮动、定位、BFC、IFC、GFC……理解这一块很多面试题都能轻松搞定)CSS可视化效果,如何处理裁剪和溢出?溢出和剪辑?显示和可见性?CSS字体匹配策略?字体系列?文字效果?好了,先写这么多吧。如何在实践中达到物理1px的效果?如何实现水平和垂直居中?常见的布局方案?浮动布局?流式布局?布局灵活?弹性布局?网格布局?无线终端响应式适配方案?CSS模块化/组件设计?CSS多边框的实现?CSS埋点统计如何实现?CSS硬件加速?性能优化?CSS预处理器和后处理器?自动前缀?后CSS?暂时想的东西太多了……乍一看,知识点不少,但100%不会完全考完。你必须学会??为了诱惑。尤其是实践篇,更要突出重点,引导面试官往你擅长的方向发展。比如你写自己对CSS组件化有研究,一般面试官不会想到问你兼容性的问题。如果面试官真的问你对IE的兼容性如何,我建议你放弃这家公司,来支付宝。.综上所述,这篇文章可能不是那么正面,因为我们技术需要Geek精神,但是这篇文章违背了这一点,因为我觉得Geek精神需要有一个方向,除非你的方向是CSS方面的专家,否则,我精力肯定跟不上。想想每天工作这么久,还要去看电影,还要装修,还要找妹子,还要带娃。想想都觉得光阴都被狗吃掉了。所以如果你真的愿意花时间去看各种规范,关注CSS的进展,那你其实是被我骗了。这不是一种“高效功利”的态度,而是前端工程师应该有的态度。哎,这个套路我打了99分。其实我不想骗大家关注CSS。我只是觉得我们还是要在工作之余思考一下前端工程师的精神和价值。