前端 CSS 面试大纲

摘要：比如说预处理器，组件化，工程化，兼容性处理等方面，这些主要是基于自己的开发经验业界流行技术方案进行准备。但是在开始谈面试前我想先提出一个概念学霸面试模型学校的学习和公司的工作有很多相似的地方。所以对于面试，请参考上学那会儿你们班学霸的姿势。

参加完 厦门第四届CSS Conf 后，让我对 CSS 产生了新的思考。CSS 是前端必须熟练掌握并保持持续关注的技术，但是我又不想在 CSS 身上耗费太多精力，因为通常情况下都会有比写 CSS 更要紧的活儿等我去做。这听起来很矛盾，要想掌握好又不想花太多精力，人就是懒，不过这也正是我想要的。

所以我想以一种“高效而功利”的态度去学习 CSS，主要基于以下两点：

前端技术体系太多，不可能去熟练掌握每一项技术

人的精力有限，把时间花在当前(或可预见的未来)对你最有价值的事情上

而对于 CSS 关注，我想大体分三类吧：

出于对 CSS 技术的热爱以及 Geek 精神

出于工作需要去研究学习以及 Coding

准备面试

目前对于 CSS，我属于后面两类。本文的目的也就是：

让你在工作中顺手的使用 CSS，在跳槽的时候能写上“熟练使用 CSS 且熟悉 W3C 标准”并顺利应对面试。

下面我会结合自己的学习经验以及面试经验进行分析。

以前入门时在图书馆借了很多 CSS 书看，有些其实写的一般，看了感觉有些浪费精力，所以这里我尝试提出一条短路径：

如果你是前端小白，推荐先看看《Head First HTML与CSS(第2版)》，Head First 系列非常适合小白入门；

如果你前端入门了，推荐去看《CSS 权威指南(第3版)》，好好巩固一下 CSS2.1 的知识；

如果你 CSS 基础打好了，再去看看《精通CSS(第2版)》，虽然100%不能保证你真的能精通，但是会加深理解；

最后不管你现在处于什么段位了，都去看看《CSS 揭秘》。

之后你可以选择继续看其他书，但我个人并不推荐花这个精力。因为学完上面几本之后你对 CSS 已经有了一个系统的认知，其他书多少会有重叠的部分，收益不大，并且书上多数技术是过时的。更好的做法是关注一下业界知名博客（如 w3cplus）和业内 CSS 方面专家，比如一丝大漠张鑫旭等，他们是活教材。另外订阅一下 CSS Weekly 邮件推送，每周保持对最新技术的关注，订阅源选一个就好，多了反而会分散你的精力，因为 CSS 方面技术只是大前端技术体系的一小部分。

当然做到这些还不够，想要更全面的理解 CSS，还得去看 W3C CSS 相关的 specifications。但是 spec 太多，不可能全部看完，咱们的目的是熟练，不是精通，所以我们也只挑重要的，比如：

CSS 2.1

CSS Basic User Interface Module Level 3(CSS3 UI)

CSS Values and Units Module Level 3

CSS Backgrounds and Borders Module Level 3

CSS Image Values and Replaced Content Module Level 3

CSS Flexible Box Layout Module Level 1

CSS Grid Layout Module Level 1

CSS Custom Properties for Cascading Variables Module Level 1

其中 CSS 2.1 的最重要，也有 中文版 的，其他的可以过一遍当做补充。这里列出了大纲：https://www.w3.org/TR/CSS/ 可以挑自己感兴趣的看，有的还是非常有意思的。如果你确实看不下去的话只啃 2.1 也可以，应付工作和面试应该够了（当年面阿里时特意把 2.1 看了一遍，只要面试官问 CSS 我就特开心）。咱们的目的是熟练，不是精通，当你对 CSS 有了一个系统化的认知后就只需要 keep an eye on 了，不用担心落伍，因为你关注的大佬们肯定会发给你一手(或者最新二手)资料。

到了这一步理论知识已经 OK 了，如果你真的仔细看了上面 spec 可以说在 CSS 方面已经超越了大部分人甚至是面试官，趁机吹一波应该没问题，但是在实践部分我们也需要准备一下。比如说 CSS 预处理器，组件化，工程化，兼容性处理等方面，这些主要是基于自己的开发经验 + 业界流行技术方案进行准备。工作上主要靠 Google，面试时最好有相关案例，比如写自己在某个项目中对 CSS 进行优化成功将 CSS 总体积精简了60%之类的就很亮眼了。但是在开始谈面试前我想先提出一个概念——学霸面试模型：

学校的学习和公司的工作有很多相似的地方。平时我们都在完成老师(公司)布置的作业(需求)，实际上做作业（需求）的时候是可以线下谷歌百度交流学习的，但是考试（面试）是闭卷，除了少数课程敢裸考之外，一般还是需要考试（面试）前复习的。我想各位程序员如果现在直接再面试一次自己公司还不一定能过，不过这样没有意义，得给同学们充分的时间准备，即使是学霸期末也不敢裸考。并且你会发现学霸跟大神总是惊人的相似，平时上课（上班）积极动手积极思考，帮助其他同学答疑解惑，深得老师（老板）喜欢，考试（跳槽）前最嗨的是他们，考完（入职）后分数最好（薪资最高）的往往还是他们。所以对于面试，请参考上学那会儿你们班学霸的姿势。

当然这个概念的名字是我瞎取的。完成了以上工作如果面试官问到 CSS 相关的问题大概率会加分，但是切记要写“熟练”，不要写“精通”，你永远不知道对面的面试官是什么 CSS 段位。

完成以上过程后你对 CSS 已经有了一个全面的知识体系了，剩下的就是划重点刷题准备考试了。刷题的目的不是题本身，而是梳理知识脉络，因为面试官不会单纯的只问你固定的问题，所以切记不要在自己没有对 CSS 有一个体系化的认知下就去刷题（这跟学霸考前温习和学渣考前突击是一个道理），这样即使能过也拿不到高分（面试高分 == 高薪，重点圈起来）。所以复习很重要，切忌裸考，事关工资，责任重大。

而一旦你的知识体系化，你会发现押题非常轻松，只要按照 spec 来划重点就可以了，我将其划分为理论篇和实践篇两大类：

CSS 标准的制定过程是怎样的？(对标准的理解)

CSS 层叠样式优先级怎么计算？(考察层叠的顺序以及 important 的影响)

CSS 有哪些选择器？如何计算优先级？(基础题，答错死)

CSS 对元素属性赋值的详细过程？(指定值-计算值-应用值-实际值)

CSS 有哪些单位以及含义区别？(再结合 dpr 适配/响应式一起问)

CSS 盒模型的理解？(继续拓展外边距合并，块级盒行内盒)

CSS 如何处理文档流？(常规流，浮动，定位，BFC，IFC，GFC...理解这块许多面试题迎刃而解)

CSS 可视化效果，如何处理裁剪和溢出？overflow 和 clip？display 和 visibility?

CSS 字体匹配策略？字体族？文字效果？

好了我先写这么多吧

如何实现物理 1px 效果？

如何实现水平垂直居中？

常见布局方案？浮动布局？流式布局？弹性布局？Flex 布局？网格布局？

无线端响应式适配方案？

CSS 模块化/组件化设计？

CSS 多边框的实现方案？

如何实现 CSS 埋点统计？

CSS 硬件加速？性能优化方面？

CSS 预处理器和后处理器？autoprefixer？postCSS？

太多了一时半会儿想不全...

乍一看知识点非常多，但是100%不会全考，你要学会循序善诱。尤其是实践篇，你要突出自己的重点并将面试官朝你擅长的方向引导。比如你写在 CSS 组件化方面有研究，那一般面试官是不会想到去问你兼容性相关问题的，若万一面试官真问你怎么兼容 IE，我建议你放弃这家公司，来支付宝。

这篇文章可能并不是那么正能量，因为对于技术我们是需要有 Geek 精神的，但是本文却违背了这一点，因为我觉得 Geek 精神是需要有一个方向的，除非你的方向就是 CSS 方面专家，否则精力上肯定跟不上，想想每天工作辣么久，还得去看电影，去装修，去找妹子，去带娃，想想就觉得时间好像都被狗吃了。所以如果你真的愿意花时间去看各种 spec，去关注 CSS 的进展，你其实被我骗了，这并不是一种“高效而功利”的态度，而是前端工程师应该有的态度。

哎，这套路我自己打99分，我其实并不是想骗大家去关注 CSS 的，我只是觉得，我们在工作之余，还是得好好思考下前端工程师的精神和价值。