谈一谈我的CSS学习历程

痛定思痛。 2022-12-28 01:39 123阅读 0赞

做为一名职业的web前端技术开发者，必备的技能就是掌握 HTML，CSS，javascript 。小编目前做前端也有4年了，从大学学习C\#、JAVA到后来实习做软件测试，最后决心转行做了前端(实际原因是JAVA学的太差，找不到实习工作)。现在是一个小小的网络博主，每天都总有那么几个网友通过QQ加我好友，叫我大佬。日常除了工作，帮求助的网友们解决问题之外还会自己写点插件和模板分享到网络上。微不足道的事情偶尔也会为我带来意外的收益，比如找我做点小单子。在2020年我也莫名其妙的加入了 uViewUI 框架的开发组。

> 注意了！插播一条广告！
> 
> uViewUI文档：[https://uviewui.com][https_uviewui.com]，有兴趣的可以去了解使用。

一说到CSS那就是大部分后端开发者有噩梦，称得上是一门迷之语言。若正在阅读该文章的你只从事后端开发，即可关闭该页面，好好写后端会更有出息。

CSS对前端来说是一门非常重要的语言，HTML，CSS，javascript 是同时存在且相互配合的。有良好的CSS基础才能写好合理的HTML结构，才能让 javascript 这种逻辑性语言更优美。现在的人人都讲用户体验的情况下，掌握CSS显得更加重要。

记得16年9月，刚学习web前端开发时，我连 <div> 定位都不会，对齐也不懂。凭借自己有一点程序思维和兴趣进了一家小公司，从最基本的页面布局学起，了解的第一个 UI 框架是 Bootstrap，第一次了解到 响应式 布局。每天下班后都会花2小时左右，将这个框架的组件实现原理抄一抄。在这个过程中 对浮动布局，元素定位等问题学习了很多。现在移动开发布局让 flex 替代，但 float 依旧是一个非常重要知识点。就这样半年里，自己的CSS能力也有了显著的提升。总结一下原因：

1.  兴趣；
2.  时间+苦练+牢记；
3.  为了活着（在学校天天玩，毕业了总得为失去的时间找补回来）；

后来换了一家新的公司，开始查阅大佬们的博客和教程网站上的基础资料。除了为会使用CSS外还要更加清楚这个属性的定义&用法&版本，许多人说CSS兼容难，其实都是CSS基础不够，对属性的兼容不了解，未根据代码的运行环境去写。工作几年之后工作中的需求基本完全可以自主实现了。到现在我依旧觉得 Bootstrap 框架是一个很好的“老师”，以最好的兼容方式达到移动适配的效果，有着经典的“栅格系统”，更有着优美的CSS代码（许多人写的CSS代码少说40%都是无用的）。有兴趣的可以认真看一看该框架的组件实现方式。

最后列举一些CSS的重点知识：

1.  display属性（这是所有布局的起点，不掌握该知识点写好布局不可能的。恰巧教程和书本上基本不会提及）；
2.  浮动&定位（这两者都是用在布局实现上且都与 文档流 有关。经常遇到一些布局上的BUG问题，大部分都是对 文档流 的概念不了解）；
3.  选择器（选择器能大幅度提高CSS质量）；
4.  动画（在拥有的较为扎实的CSS基础后，能自主实现2D 3D动画在工作中是绝对加分的。比如活动中出现的 跳一跳、扭蛋机、转盘 等都是非常实用的。）；

最后的最后列举一下学习CSS的资料（顺序的前后取决与我复制时的顺序，不带入任何其它原因）：

1.  文档：[MDN][]、[HTML中文网][HTML]、[菜鸟教程][Link 1]、[w3school][]
2.  博客：[张鑫旭][Link 2]、[阮一峰][Link 3]

> 作者：[黄河爱浪][Link 4] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 本文原创，著作权归作者所有，转载请注明原链接及出处。

[https_uviewui.com]: https://uviewui.com/
[MDN]: https://developer.mozilla.org/zh-CN/
[HTML]: https://www.html.cn/
[Link 1]: https://www.runoob.com/
[w3school]: https://www.w3school.com.cn/
[Link 2]: https://www.zhangxinxu.com/
[Link 3]: http://www.ruanyifeng.com
[Link 4]: https://blog.csdn.net/u013350495