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

相关推荐
_阿南_1 小时前
项目中新增给AI制定的代码规范
前端·程序员
名字还没想好☜2 小时前
React 实现暗黑模式切换:localStorage 持久化、SSR 首屏闪烁与跟随系统主题
前端·javascript·react.js·ecmascript·react·next.js
console.log('npc')3 小时前
Git 冲突与 AI 协助指南
前端·人工智能·git·大模型
黄敬峰4 小时前
一文搞懂 LLM 流式输出与 SSE
面试
爱学堂IT分享5 小时前
Cesium可视化系统实战课程-Cesium教程学习
前端
糖墨夕5 小时前
理解大语言模型:Agent 的“大脑”
前端·agent
Rain的Java大神之路5 小时前
JavaWeb开发如何解决跨域问题
java·前端·后端·nginx·web安全·面试·运维开发
cpolar技术支持5 小时前
浏览器也能跑本地 AI:用 Transformers.js + WebGPU 做一个最小推理 Demo,cpolar 给同事远程体验
前端·ai·cpolar·webgpu·transformers.js
职场的momo6 小时前
字节生活服务海量内推,挑战亿级订单与AI交易中台
人工智能·程序人生·面试·职场和发展·跳槽·生活·业界资讯
计算机魔术师7 小时前
OpenAI 发布 GPT-6 Astra:多项基准刷新纪录, cybersecurity 能力达 Critical 阈值
前端