对于CSS,大部分人只知道一个CSS3标准,而现在前端开发大多是用框架、样式库,或者是用预处理器,这样就几乎接触不到CSS底层的细节了。
其实,CSS中的单位非常丰富,涵盖了长度、颜色、角度、时间、频率等。本文主要参考了CSS速查CSS手册

这里先整理的内容汇总,比较重要的是长度单位中的em和rem,这两个单位可以称得上现代移动端等响应式布局的核心单位;而vh、vw等可以当做相对于屏幕长宽的百分比,效果优秀,可惜兼容性不敢恭维,用途受限。更多具体的内容详见下面的正文。

长度单位

绝对单位:
px:像素点数目
mm cm in q:不常用的长度单位,表示毫米、厘米、英寸、1/4毫米长度
pt pc:不常用的长度单位,用于印刷业,表示码点、派卡

相对单位:
%:百分比单位,相对于父级的比例
如果父级的height为auto,子元素的百分比高度无效,但是宽度是有效的
padding-bottompadding-top百分比长度依赖元素的宽而不是高

em:相对于父节点字体大小而改变,1em=1字体大小
rem:相对于根节点字体大小而改变,1rem=1根节点字体大小(CSS3)
ch ex:相对于当前字体表现的长度,ch是数字0的宽度,ex是字母x的高度(ch是CSS3新增)
vh vw:相对于当前视口大小,100vh=视口高度,100vw=视口宽度(CSS3)
vmin vmax:前者值始终是视口宽/高中较少的一方,后者值则是较大的一方(CSS3)

颜色单位

预定义颜色:如red、green等css内置颜色变量
#000000:16进制的一串颜色码
rgb:RGB三原色表示,3个值取值均为0-255
rgba:比RGB多一个透明度参数,取值0-1
hsl:色调、饱和度、亮度的颜色表示法
hsla:比hsl多一个透明度参数
transparent:表示全透明黑色,等同于rgba(0,0,0,0),是透明的
currentColor:继承当前元素的color值

其他单位

角度(CSS3):
数字:表示度数,0-360取值范围,超出范围则有-10等同于350
deg grad rad:角度、梯度、弧度三种角度单位,一个360角度的圆,它可以分别用400梯度、2pi弧度来表示
turn:圈数,一个360度的圆是1turn

时间:s ms:表示秒和毫秒。时间不能为负值(CSS3)
频率:Hz kHz:赫兹和千赫兹。(CSS3)
分辨率:dpi dpcm dppx:代表单位长度像素点个数,分别表示英寸点数、厘米点数、像素点数(CSS3)

CSS中的语法

"字符串" '字符串':一串字符串,包含引号可用\来转义
!important:提高样式的优先级
@import:引入指定的资源,可以直接接字符串或者url(...),注意编码名用双引号,结尾必须有分号
@charset:指定该样式表的编码,注意编码名用双引号,结尾必须有分号
@media:媒体查询
@font-face:嵌入HTML文档的字体,尽可能提供.woff和.tff和.svg和.eot四种格式
@page:打印时的设置
@keyframes:定义一个动画
@supports:检测是否支持某CSS

函数:
calc( ):计算属性,支持加减乘除四种运算,注意运算符两侧必须用空格
toggle( ):参数是一串属性序列,子孙后代依次使用其中的属性。暂未被任何浏览器支持
url( ):url引用符号,参数是一个表示资源url的字符串,建议写引号
attr(name):获取元素的属性值,其中的name表示属性名称,name不要加引号
counter( ) counters( ):计数器和重复多次的计数器