我与css有个约会（1）- 初入前端

写在专栏之前

css是个好玩的东西，但是想要玩起来还是要花些心思的，一直想写一些我在css学习过程中遇到的爽点，但是又不知如何下笔。终于在周末强迫自己开始，忽然发现记忆如潮水般涌来，这个专栏应该是自己喜欢的系列，希望能够给初入前端的兄弟们一些启示。

回首

记得几年前那个时候做C#开发，也没有所谓的前后端分离，我们做完服务端，还要自己写前端页面。这个时候就遇到所有服务端同学都遇到的难题，网页的样式怎么写，那个时候没有标注工具，完全头大。好在当时我们的设计学习了css，她提前把整个静态页面写出来，然后我们就把静态页面用jquery改造成支持ajax的页面。

也是从那个时候开始，我同我们的设计同学学了好多jquey和css相关的知识，那个时候我们还打印了常用的样式表，常用的jquery选择器列表，一边背，一边当作工具书在工作中使用。

后来服务端的工作渐渐规范化，开发的效率比较高，我的工作重心渐渐转移到了前端，在体会到js的自由（特别是发现了函数居然可以当作参数传递）之后，渐渐的喜欢上了前端开发，那个时候开始学习各种前端知识，js倒是学的很快，css一直是个难题，有时候看着设计图，明明知道该怎样布局，但是css就是写不出来。

不过由于设计一直帮忙兜着底，一直到换工作前，css我也只是能看得懂的阶段，让自己去布局，还是会有一种无从下手的感觉。直到换了工作，换了城市，也从服务端转到了前端，一切都靠自己的时候，css慢慢的成为了我熟悉的技术。

面试

那个时候，正是react和vue框架刚兴起的时候，我从服务端转前端也是鼓起了勇气，感觉自己js比较精通，面试css应该涉及的不多，就投了很多前端。当时把html5和css3的基础书籍都看了几遍，然后就直接去面试了。

面了很多家公司，当时也是边面试边学习，关于css，记忆比较深刻的几个题是：

1. 实现居中有几种方式，如何实现绝对居中

2. 盒模型是什么

3. display和visbility之间的区别及应用

4. 雪碧图的应用场景和实现方法

5. flex布局

很多公司都会问这几题，感觉那时候大家css都问的比较浅，不过大多都是偏实践，基础书中是没有详细介绍的。因此一开始都是答的不咋样，后来面的多了，就都能回答出来了。甚至到最后我记得有一家公司，面试官对着一张纸上在那快速问问题，然后我疯狂的回答，大家好像例行公事一样快速的完成了面试，都把我面乐了。大部分中小公司，其实面试也是一个难题，面试官甚至都是临时拉过来的。

初入前端

面了一周，拿了几个offer，由于是从新开始，也没有慢慢等，就入了一家创业公司，搞数据相关的，工作也不是单纯的前端，我几乎是1号员工，于是有了神奇的经历。招人、画原型、设计产品、搭建数据层、写服务端代码、写前端代码都搞了一遍。由于没有专业的设计，就使用了网上的iview的ui框架，然后搞了一个后台，这段时间在css这块实践极多，也发现了为啥之前面试css，大家都问那几个问题。

人往往是这样，当你刚学会某一样能力或者技术的时候，你就到处都会用它。

我在写后台的时候，一开始也是position-relative+absolute到处乱用，布局很听话，位置想怎么安排就怎么安排，可比最开始的float好用的多。

float布局以前我那个设计同事用的很精通,经常用的应该都知道“clear:both;”,不过感觉它有时候不太听话，主要是因为我用的不熟。但是有了新的替代方案之后，float就再也没有用过了。

再后来接触了flex，不得了，这玩意太好用了，简直让人上瘾。列表布局必不可少，后来甚至发现它对文字也有效，于是line-height我有段时间也不用了，所有按钮都是flex。

总之一句话，用的爽，能实现效果就ok了。就这样，搞出了个产品的雏形，也迭代了好几版，直到我们招了专业的设计。