数值单位和数值

一、长度单位

1.1 绝对单位 absolute units

1.1.1 px `pixel`

像素是一个绝对单位，这里，有些可能要说，不是说px是相对单位吗？其实这点并不准确。因为不管如何设置，像素单位在设备确定之后总是不变的。
在Retina大行其道的今天，物理像素和逻辑像素产生了相对冲突，导致1px所需要的物理像素更多。但是显示的1px像素大小并没有实际变化。由此引出像素比率dpr (device pixel ratio)，浏览器可以通过window.devicePixelRatio可以获取到当前浏览器的设备像素比率

公式	单位面积	设计稿
1px=1dp	1px1px=1dp1dp	1:1
1px=2dp	1px1px=2dp2dp	1:2

做屏幕适配时，总是会遇到这些内容

1.1.2 其他单位

in 英寸，cm 厘米，mm 毫米，pt磅 pc 点
这些单位不是常用单位，也很少出现在css的布局中

二、相对单位

2.1 em

em是相对于当前元素的font-size属性的单位值，当font-size设置为 12px时，1em = 12px
但是font-size是一个可继承的属性，所以，当你没有设置值时，会从父级继承该属性的值。这一点相当重要。

2.2 rem

rem相比em的好处就是，所有相对单位rem是以root元素也就是html标签的font-size为基准，因此有了同一的度量单位，就不再担心继承上影响了实际所需要的大小。当html的font-size设置为15时，1rem=15px

2.3 vw vh

这个相对单位时相对于屏幕设备的 vw就是view width简写，vh 就是view height简写。
该单位是将屏幕等分为100分， $1vw = \frac{viewWidth}{100}$ ， $1vh=\frac{viewHeight}{100}$

2.4 vmin vmax

vmin 取当前视窗最小的边，然后等分100份。
vmax 取当前视窗最大的边，然后等分100份。

2.5 fr (`fraction`)

这个单位伴随着 grid布局而出现。其代表的是grid布局的剩余空间。如果设置为1fr，表示需要1份空间。至于这个1份有多大，其实和flex布局时，子元素设置flex是类似的。当flex布局时，还剩余空间，就会按照设置好的比例增长。这里的1fr也是。如果剩余空间，就会按照fr给定的指数增长，如果剩余不足，也只会按照指定的部分缩减，整体上还是保持不变的。

2.6 ch

又是一个非常神奇的单位，这个单位代表可容纳0字符的宽度的“先进的尺寸”。也是我第一次看到以数字作为长度单位。

2.7 ex

我们可能直到em，但是未必知道ex，在css1的时候就已经被采纳了。ex是一个相对单位的相对单位，代表二分之一个em的长度单位。这个单位通常用在字体的上标或者下标。很容易的设定字体大小为当前字体的一半。

三、无单位值

3.1 固定倍数 0

0有时候可以作为任意数值单位的值，比如width:0，padding:0 但是你不可以写 width:1,padding:1 之所以是因为这里的0实际上是一个倍数的乘法因子，任何数 × 0 = 0，所以可以计算得到准确数值，而其他数则不可以，任何数 × n(非0) = n 倍任何数，但是又不能准确的描述任何数，因此在渲染解析时，不确定的因素都会被舍弃。

3.2 相关联倍数

比如line-height 属性，这个属性关联font-size，当设定为无单位数值时，表示这个属性值时font-size值的倍数关系。假设当前元素的font-size:15px 则 line-height:1 解析后得到 line-height:15px

3.3 计数

animation-iteration-count: 5 表示计数器执行5次

四、角度单位

四个单位的换算关系 $90deg = 100grad = 0.25turn = \frac{π}{4} rad$

4.1 deg度

通常在旋转中使用 transform: rotate( 2deg );

4.2 grad 梯度

通常在旋转中使用 transform: rotate( 2grad );

4.3 rad 弧度

通常在旋转中使用 transform: rotate( 2rad );

4.4 turn 圈

通常在旋转中使用 transform: rotate( 2turn );

五、百分比 %

百分比也是一个倍数关系，从父级相同属性上换算的值
假设当前父级的 width: 100px ，子级的 width:15%，换算得到子级 width:15px

六、颜色

6.1 关键词

在色彩中又很多关键词数值，是由系统预设的，最终会被换算成十六进制的数值，比如
red = #ff0000 green = #00ff00 blue =#0000ff

6.2 十六进制

从 #000000到 #ffffff ，每一个十六进制表示一种色彩

6.2 RGB 红绿蓝色彩通道

使用 rgb()函数可以创建 rgb(0,0,0)到rgb(255,255,255)的色彩

6.3 HSL 色彩，饱和度，明亮度

使用hsl()函数可以创建基于 hsl(0,0,0)到 hsl(360,100,100)的色彩，在低版本IE中可能不受支持

6.4 alpha 透明度

alpha是一个从0-1的浮点数，0表示不透明，1表示全透明
现代浏览器中，支持透明度无疑是一个非常有用的内容，使用rgba()或者hsla()创建基于alpha通道的色彩，支持 rgba(0,0,0,0)到

 所有的涉及到颜色属性的颜色值都会有一个变量名 'currentColor'，这个名称代表继承元素的'color'的属性值。

最后编辑于：2018.08.29 10:41:26