CSS单位【记录】

Roy 2019-01-09 01:47174 阅读

 

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>:百分比值

 

回复数量: 0
暂无评论~~
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!