CSS单位【记录】

 

1、长度

2、角度

3、时间

4、分辨率

5、颜色

6、函数

7、生成内容

8、图像

9、数字

 

1、长度

<length>：数字和单位之间没有空格，0之后的长度单位是可选的

相对长度单位

　　em：相对于字体大小

　　ex：相对于小写字母"x"的高度，对于很多字体，1ex ≈ 0.5em

　　ch：相对于数字"0"的宽度 /* IE9+ */

　　rem：相对于根元素字体大小 /* IE9+ */

　　vw：相对于视口的宽度，视口宽度的1/100 /* IE9+ */

　　vh：相对于视口的高度，视口高度的1/100 /* IE9+ */

　　vmin：视口高度和宽度之间的最小值的1/100 /* IE9+ */

　　vmax：视口高度和宽度之间的最大值的1/100 /* IE不支持 */

绝对长度单位

　　cm、mm、1/4毫米（q）、英寸（in）、点（pt）、派卡（pc）、px

　　1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

 

2、角度

<angle>：在<gradient>、transform的某些方法等场景中有所应用 /* IE9+ */

度（degrees）：一个完整的圆是360deg

梯度（gradians）：一个完整的圆是400grad

弧度（radians）：一个完整的圆是2πrad

圈数（turns）：一个完整的圆是1turn

 

3、时间

<time>：于animation、transition及相关属性中使用 /* IE9+ */

1s = 1000ms

0是无效的，并不代表0s或0ms

 

4、分辨率

<resolution>：用于媒体查询，屏幕通常每英寸包含72或96个点，一般将2倍于此的屏幕称之为高分屏

dpi：每英寸包含点的数量（dots per inch） /* IE9+ */

dpcm：每厘米包含点的数量（dots per centimeter） /* IE9+ */

dppx：每像素包含点的数量（dots per pixel） /* IE9+、Safari不支持、手机不支持 */

1dppx = 96dpi

1dpcm = 2.54dpi

0是无效的，并不代表0dpi、0dpcm或0dppx

 

5、颜色

<color>：rgb()、hsl()、关键字

hex：#f00，十六进制记法

rgb：rgb(255, 0, 0)

rgba：rgba(255, 0, 0, 1)，IE8可使用IE滤镜处理 /* IE9+ */

hsl：hsl(0, 100%, 50%)，色相-饱和度-明度 /* IE9+ */

hsla：hsl(0, 100%, 50%, 1) /* IE9+ */

关键字

　　色彩关键字

　　transparent：透明 /* IE6+ */

　　currentColor：当前颜色 /* IE9+ */

 

6、函数

calc()：calc(100% - 20px)， + 和 - 运算符的两边必须始终要有空白符 /* IE9+ */

 

7、生成内容

counter()：插入计数器 /* IE8+ */

counters()：重复插入计数器 /* IE8+ */

attr()：插入元素属性值 /* IE8+ */

 

8、图像

<image>：<url> | <gradient>，描述的是2D图形

<gradient>：可使用IE滤镜处理 /* IE10+ */

　　linear-gradient()

　　radial-gradient()

　　repeating-linear-gradient()

　　repeating-radial-gradient()

 

9、数字

<number>：整数或小数

<integer>：整数

<percentage>：百分比值