总结近三十场的校招前端面试（CSS篇）

　　

　　coder

　　背景

　　这是接上一篇JS篇的内容，没有看到的朋友可以关注我们，在找对应的文章。

　　吐槽几句：前几天自己在掘金发布了俩篇自己毕业找工作的面试总结，小火了一把之后...没想到评论区炸开了，有diss我的，也有支持我的。更有的伙伴们特地到我们的公众号（IT面试填坑小分队）留言谢谢我们，这让我保持了动力，因为每次文章的更新对于我来说都是一次鞭策，让我写了一天需求回家之后没有懈怠，继续保持学习状态。

　　有经验、想指导的：可以留言指导，你的指导都可以帮助我和看官们少走一些弯路，我们都会由衷感谢您，

　　和我一样刚毕业的童鞋们: 我们可以一块交流，不同的见解可能碰撞出美妙的答案。

　　准备入行、准备面试的童鞋们，希望你们不要单纯的去背面试题，学会理解知识，行业浮躁但是行业中的我们不要浮躁。背一道题你只会一道，理解一道题、一个知识点可以帮你会做一个类型的题，后者更累可是效率也更高，希望马上要实习或者校招的你们有一个好的未来。加油！

　　话不多说~~

　　你好CSS面试（依旧基础）1 请说一下什么是盒子模型（真·基础问题）2 什么是块级格式化上下文（BFC）？ 什么样的元素会生成BFC？ BFC的布局规则是怎样的？

　　BFC的内容需要好好理解、一般会结合实际问题：比如margin重叠问题。

　　3 width与height设置的百分比是相对谁来计算的？padding与margin呢？4 如何设置一个边长等于浏览器宽度一半的正方形？

　　结合上个问题。元素的padding是相对于父元素的宽度来计算的，那么答案是不是一目了然。还有一个答案可以参考下一个问题。

　　5 请问你了解vm vh这个单位吗？6 如何实现一个元素的垂直居中？7 对flex布局有所了解吗？请用flex布局实现一个三列布局8 可以不用flex实现一个三列布局吗？

　　针对于万一让你说两种情况或者flex布局你紧张的遗忘了，请大胆使用圣杯布局与双飞燕布局大法。

　　9 position属性有几个值？哪些值会脱离文档流？absolute是相对于谁来定位的？relative呢？10 rem与em了解吗？分别是相对于谁来计算的？11 了解移动端的适配吗？请问什么是rem布局？在移动端的1px问题该如何解决。

　　亲身经历过一小段时间的rem布局，可以了解一下Retina屏，以及一些物理像素的知识，淘宝的无限适配可以了解一下，媒体查询也不要忘记。

　　12 对于css3的transform有了解吗？13 对于css3的动画有了解吗？必填属性有哪些？14 在实现一个div移动的动画，使用translate、top（代指定位）、margin之间有什么性能上的不同？

　　这个问题涉及一个渲染层的内容。如果回答出来可能顺势就问到如何创建一个渲染层。

　　15 cpu与gpu有了解吗？区别是什么？如何调用gpu渲染。

　　对于浏览器重拍重绘问题不再这里讨论了，我还得捋一捋忘的厉害，在以后继续学习浏览器性能方面一定会再拿出来讨论。

　　16 最后一箩筐：如何清除浮动？ 什么是css样式初始化？为什么要这么做？css选择器的权重都是什么？什么是伪类与伪元素？

　　上面这个小箩筐问题相对来说，见的应该已经很多了。而且是真的出现在自己平时的学习与做的小项目中，我也就就不多提了，也不确定面试会不会问。

　　这些css问题在我看来使用率是真的很高的。移动端rem布局、flex布局、css动画、高度宽度百分比问题。尤其是在接触与vue、react这种框架一块使用的UI库比如element-ui以及ant-desgin你没有这些知识，没有这些知识的储备想要修改这些UI库的样式达到自己想要的效果就很难了。css是一个黑魔法，知识可以说是无穷无尽，希望大家正视它。

　　总结与鸡汤

　　虽然做的是面试题的总结。但是每每回想这些面试题的内容，我就在考虑这些知识是不是很难一蹴而就、一学就会的？好像是。 做为一名刚入行的小白菜前端，每天做着产品经理给的需求，除了周六日（双休的公司还蛮幸福的）已经很难找到大块时间去学习了，周六周天想要打磨自己的基础，但是一想上了五天班看什么书，玩去咯。每一项基础知识都在改变你写代码的习惯。当你知道translate会创建新的层的时候，不考虑兼容的话，你就会更多的使用它。当你了解了重排重绘的原因，你有意回避这些的出现，你的项目流畅性就会越来越好，扎实的基础真的可以帮助你更合理的考虑问题与编码。扯远了扯远了，愿每一位看官看完这一段鸡汤有一个好心情。