CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实。可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进javascript的深坑里跳不出来。实际上,javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题,而且性能还好。
CSS之所以能成为一门优雅的语言,以及有其对应的重构工程师的岗位,是因为这本语言本身就有很强的存在价值,且真正要理解它并不容易。从CSS禅意花园开始,写CSS成为一种艺术。从CSS2.1到3再到4,CSS所涵盖的内容及可实现的功能得到了极大的丰富,使得CSS的学习成本也越来越高。再多的知识,一个知识点一个知识点去学,总能学明白。
小火柴将CSS的知识体系进行了梳理和归纳,总结成以下目录
引入CSS
CSS选择器
CSS层叠
CSS默认可继承样式
initial、inherit、unset、revert和all
深入理解CSS中的长度单位
理解CSS中的数学表达式calc()
CSS字体
CSS中常见的6种文本样式
深入理解line-height与vertical-align
深入理解CSS中的换行和空白符
文本溢出和文本阴影
深入理解CSS6种颜色模式
CSS颜色模式转换器的实现
CSS前景色和透明度
深入理解CSS背景
CSS光标cursor
深入理解盒模型
理解CSS边框
深入理解CSS中的margin负值
CSS轮廓outline
深入理解CSS弹性盒模型flex
CSS旧版flex及兼容
深入理解display属性
haslayout详解
深入理解BFC
块级元素视觉格式化
行内元素视觉格式化
CSS文本方向
深入理解CSS浮动
CSS清浮动
深入理解CSS定位中的偏移
深入理解CSS定位中的堆叠z-index
深入理解CSS绝对定位
CSS绝对定位的应用
理解CSS相对定位和固定定位
深入理解CSS溢出overflow
CSS裁剪clip
CSS拉伸resize
CSS滚动条
深入理解CSS可见性visibility
深入理解伪元素
深入理解CSS计数器
深入理解CSS过渡transition
深入理解CSS变形transform(2d)
深入理解CSS变形transform(3d)
深入理解CSS线性渐变linear-gradient
深入理解CSS径向渐变radial-gradient
深入理解CSS动画animation
动画animation的三个应用(漂浮的白云、旋转的星球和正方体合成)
CSS多列布局
CSS实现水平居中的4种思路
CSS实现垂直居中的4种思路
CSS实现水平垂直居中的5种思路
两列布局中单列定宽单列自适应布局的5种思路
两列自适应布局的3种思路
CSS三列布局
实现CSS等分布局的4种方式
CSS等高布局的6种方式
CSS全屏布局的5种方式
三栏式布局(所谓的圣杯和双飞翼布局)
元素显示隐藏的9种思路
实现滑动门的3种方法
CSS画出的图