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

相关推荐
编程零零七3 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
(⊙o⊙)~哦5 小时前
JavaScript substring() 方法
前端
无心使然云中漫步5 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者5 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_6 小时前
解决ruoyi-vue-pro-master框架引入报错,启动报错问题
前端·javascript·vue.js
麒麟而非淇淋7 小时前
AJAX 入门 day1
前端·javascript·ajax
2401_858120537 小时前
深入理解MATLAB中的事件处理机制
前端·javascript·matlab
阿树梢7 小时前
【Vue】VueRouter路由
前端·javascript·vue.js
随笔写8 小时前
vue使用关于speak-tss插件的详细介绍
前端·javascript·vue.js
史努比.8 小时前
redis群集三种模式:主从复制、哨兵、集群
前端·bootstrap·html