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

相关推荐
来自星星的坤2 小时前
【Vue 3 + Vue Router 4】如何正确重置路由实例(resetRouter)——避免“VueRouter is not defined”错误
前端·javascript·vue.js
香蕉可乐荷包蛋6 小时前
浅入ES5、ES6(ES2015)、ES2023(ES14)版本对比,及使用建议---ES6就够用(个人觉得)
前端·javascript·es6
未来之窗软件服务6 小时前
资源管理器必要性———仙盟创梦IDE
前端·javascript·ide·仙盟创梦ide
冬瓜的编程笔记7 小时前
【八股战神篇】MySQL高频面试题
数据库·mysql·面试
liuyang___7 小时前
第一次经历项目上线
前端·typescript
西哥写代码7 小时前
基于cornerstone3D的dicom影像浏览器 第十八章 自定义序列自动播放条
前端·javascript·vue
独行soc8 小时前
2025年渗透测试面试题总结-百度面经(题目+回答)
运维·开发语言·经验分享·学习·面试·渗透测试·php
清风细雨_林木木8 小时前
Vue 中生成源码映射文件,配置 map
前端·javascript·vue.js
FungLeo8 小时前
node 后端和浏览器前端,有关 RSA 非对称加密的完整实践, 前后端匹配的代码演示
前端·非对称加密·rsa 加密·node 后端
不灭锦鲤8 小时前
xss-labs靶场第11-14关基础详解
前端·xss