我与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了。就这样,搞出了个产品的雏形,也迭代了好几版,直到我们招了专业的设计。

相关推荐
怪兽20144 小时前
什么是 Redis?
java·数据库·redis·缓存·面试
Dream it possible!4 小时前
LeetCode 面试经典 150_栈_有效的括号(52_20_C++_简单)(栈+哈希表)
c++·leetcode·面试··哈希表
kyle~5 小时前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light605 小时前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
怪兽20145 小时前
IntentService 的应用场景和使用方式?
android·面试
爱生活的苏苏6 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
编程岁月7 小时前
java面试-0141-java反射?优缺点?场景?原理?Class.forName和ClassLoader区别?
java·开发语言·面试
一只小风华~7 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟8 小时前
html 实现鼠标滑动点亮横轴
前端·javascript·html
iCoding919 小时前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构