前言：拿上“指南地图”启航

引言

小伙伴们，大家好！欢迎来到《趣学CSS基础》—— 一个把 CSS 当故事讲的神奇专栏~👀
如果你入门学习前端开发被《CSS权威指南》砸得头晕眼花，或者觉得 “w3School 教程” 太枯燥乏味，那请把这本书收藏进来；
从今天起，只靠讲故事和案例，带你从学习枯燥的 CSS “记录片” 转换成有趣的 “图文漫画片”！

🧭 阅读指南？
不存在！我们直接上图——一张“指南地图”，上面全是关键路径，不走弯路，只带你抄近道。准备好扶好键盘，咱们这就发车！🚗💨

大纲详见：
https://www.processon.com/mindmap/67b6e55d94e3aa23ba343b86

为什么要写这个专栏

来自一个 “被许多技术圈贵人喂大，现在反哺社会” 的前端技术博主的自白：

缘起：我是怎么被“投喂”长大的（做前端程序员的剧本）

• 大学没钱买服务器 → 学长甩给我一个云主机傻不拉几，还不会玩
• 快毕业担心没工作养活自己 → 实验室小伙伴拉上我到处霸面，最终进了前端开发圈
• 毕业第一份工作 → 领导把最难啃的兼容性 bug 扔给我练级
于是我在心里给自己立了个 flag：等我有料了，也要当别人的外挂。

我与 CSS 的 8 年虐恋

2017 年，我第一次见到 CSS：
“就这？改个颜色、调个间距，so easy！”
——像极了第一次约会就把对方当 “老实人”。
初写代码的前半年，总被 float 和 clearfix 联合双打；被 flex 和 grid 按在地上摩擦。
直到今天，CSS 新特性还在连夜出新番，像极了永远填不完的坑。

AI 时代的尴尬

“规范大全”随手一搜 10 万条，
“最佳实践代码”一键生成 300 行，
但依旧挡不住新人同事一句：
“哥/姐，AI 生成的内容和代码靠谱不？”
—— AI 时代让知识可以 Ctrl+C 随手可得，但“手感”必须 Ctrl+S 在脑子里。还有AI 时代让开发界变得越来越浮躁，当遇到棘手问题，AI 工具给出一堆解决方案，新手开发还是无法快速判断并灵活运用知识，于是我便想写这个专栏，把 8 年的前端开发精华和关键的 CSS 基础知识沉淀成一个个有趣生动的故事和案例，做一件有意义的事：让 AI 时代的新手开发能先快速夯实基础，更好地面对智能化时代编程挑战！

一句话总结

当年别人把我从坑里捞出来，
现在轮到我趴在坑边递梯子了。

专栏大纲

本专栏课程内容，主要分为6个部分：初识 CSS、原理、CSS 基础知识、CSS 进阶知识、CSS 实战和扩展部分。

初识篇：

初识篇部分，主要是带大家初识 CSS 世界和 CSS 的语法规则，让大家对 CSS 有个初步认识。

原理篇：

原理篇部分，则是从浏览器渲染原理来了解 CSS 如何扮演网页的 “美容师” 的，带大家从原理出发深刻地理解 CSS 运作机制。

基础篇：

基础篇部分，则是通过结合案例的方式讲述盒模型与 BFC、选择器、定位属性、尺寸属性、文本属性和装饰属性，让大家方便理解并运用 CSS 基础知识。

进阶篇：

进阶篇部分，也是通过结合案例的方式继续讲述 CSS 进阶知识：变量计算、函数计算、CSS3 文字特效、CSS3 2D/3D 转换、CSS3 动画效果、Flex 弹性布局和 Grid 网格布局等。

实战篇：

实战篇部分，则是给大家介绍开发实战中常见的经典布局，最后则是带大家灵活运用上述所学的 CSS 知识，实现一个小游戏：子弹射击外星飞船UFO。

扩展篇：

扩展篇部分，则是给大家介绍近几年比较流行的 CSS 原子化框架，比如：TailwindCSS、UnoCSS 等。