本章分类讨论css中的值和单位

1.关键字、字符串和其它文本值

关键字

规范中每个属性都可以使用的关键字：inherit、initial、unset
inherit：把属性设为与父元素的同一属性一样的值，显式指定为inherit的属性是有特指度的。
initial：把属性的值设为预定义的初始值
unset：对继承的属性来说，unset和inherit一样；对不继承的属性来说，unset和initial一样。

特殊属性all，只能接收inherit/initial/unset三种值。（有人提议设计一种值revert，表示让元素属性不使用自己编写的样式，而使用其它来源的样式，不过目前还在商讨中）
all表示除了direction和unicode-bidi之外的所有属性。（有的浏览器不支持all属性）

字符串

字符串值中的换行符需要转义，用\A表示。

url

值可以是绝对url，就是路径可以用来在互联网上访问资源的url；也可以是相对url，浏览器会把所在的样式表地址 和 相对路径 拼接起来。

图像

图像值可以是图像的url；也可以是image-set，一系列图像（只有Safari和Chrome等几种浏览器支持）；还可以是gradient，渐变图像。关于渐变第9章再细说。

标识符

有些属性接受标识符值，即用户定义的某种标识符。css是区分大小写的，所以大小写不同的标识符是不同的。（类似变量）

2.数字和百分比

整数

取值取到属性值范围之外的话，样式就不会生效，但按照某些属性的定义，值填到范围之外了，会被解读成一个与所填值最接近的、合法的值（这种行为叫clamping）。
除了像z-index这种明确规定了取值范围的属性，一般来说，浏览器接受的整数范围在±2^30。

数字

略

百分比

百分值始终相对于另一个值（同个元素的另一个属性值，或者父辈元素的属性值等），接受百分数值得属性会定义取值范围，以及百分比是相对什么来计算。

弹性值

数字后面跟着fr，这是栅格布局中用的，表示把布局中的空间分成几等分。

3.距离

长度需要数字和单位来表示。（除了0，此时不需要单位）

绝对长度单位

css中有7中长度单位：英寸（in）、厘米（cm）、毫米（mm）、四分之一毫米（q）、点（pt）、派卡（pc）、像素（px）
其中四分之一毫米q，只有Firefox支持
pt是一个在打印机上使用多年的印刷度量单位，1英寸有72点。
派卡pc也是印刷术语，1派卡等于12点，1英寸有6派卡
像素px，在css中本来定义为:1英寸为96像素，但现实中浏览器一般把设备屏幕上一个点作为一像素。
很难用绝对单位实现现实世界中的度量，浏览器不可能掌握系统中所有影响显示的信息。不过，绝对单位在定义文档的印刷样式时很有用，因为打印机通常使用英寸、派卡和点。打印机会把css样式里的像素换算成点。
css规范建议，如果显示设备的屏幕上，每一英寸包含的显示点（也就是ppi，pixels per inch）与96相差很大，浏览器应该缩放像素度量，使用参考像素。
按照本来的构想，1英寸为96像素，但是现在的设备显示器，比如iPhone的视网膜显示屏已经到了326ppi，iPad显示屏有264ppi。
分辨率单位
为了描述显示器的分辨率，出现了3个新单位：dpi、dpcm、dppx，这些单位只能在媒体查询中使用，如：@media(min-resolution: 500dpi)
dpi：一英寸内有多少个屏幕点
dpcm：一厘米内有多少个屏幕点
dppx:一css的px里有多少个屏幕点
1dppx=96dpi 因为css设计px的时候就是让96px=1英寸，所以一个屏幕的分辨率为一英寸96点，它的分辨率也就是一px一点。

相对长度单位

相对长度是指长度相对其它东西而言的，如屏幕分辨率、视区宽度、用户偏好设置等。
em和ex
1em等于元素的font-size属性。如果设置font-size:1em则字号会设成父元素字号大小。
ex的定义和em有点像，指该元素所用字体和字号下，字母小写x的高度。所以字号相同的情况下，字体不同，ex的大小也会不同。
rem
与em类似，等于所声明的字号的尺寸，区别在于，rem始终相对于根元素（html）。
在支持initial关键字的浏览器中，如果根元素没有设定字号，那么font-size: 1rem相当于font-size: initial
ch
css3新增了一个单位ch，表示进距（advance measure），含义脱胎自印刷行业中的advance width，只是因为网页上有些文字是竖排的不是水平的，所以叫advance measure。一ch等于所用字体中的一个0的宽度加上侧边的距离，也就是一个0的进距。等宽字体的所有字符宽度都是1ch，而非等宽字体就不是。
视区相关单位
css3还新增了4个与视区相关的单位，视区宽度单位vw、视区高度单位vh、视区尺寸最小值单位vmin、视区尺寸最大值单位vmax。它们分别表示浏览器窗口视区宽度的1/100、浏览器窗口视区高度的1/100、vw和vh中的较小值、vw和vh中的较大值。
这些单位是长度单位，因此任何允许使用长度单位的地方都能用。而且它们不是跟主轴绑定的，比如说元素宽度也可用vh来设置，width:25vh。

4.计算值

calc()允许使用的运算符有加减乘除和括号。
长度、频率、时间、角度、百分比、数字都可以进行计算。
限制：
1.加号和减号两侧必须使用相同的单位类型，如5em + 2.7是无效的，而5em + 20px则是有效的。90% - 2em也是可以的，表示父元素宽度的90%减去2em。
2.乘法计算时，其中一个值必须是数字，不带单位的。如2rem * 2rem是无效的。
3.除法计算时，除号右侧必须是数字，不带单位的。
4.加减号两侧要有空格，乘除号两侧则没有限制。
5.规范要求浏览器能支持最多20个算子，超过20可视为无效。

5.属性值

使用attr表达式可以取到属性值
比如attr(id)可以取到元素id属性值。比如content: "["attr(id)"]"就能把元素id属性放在渲染出来，还附带了一对中括号。
注意：有些比较花式的写法浏览器并不支持，比如input {width: attr(maxlength) em;}使用的时候还是要看具体情况

6.颜色

具名颜色
早期css有16个颜色关键字，现在的css规范有148个具名颜色了。

RGB和RGBa颜色
可以用rgb(百分数,百分数,百分数)，也可用rgb(整数,整数,整数)整数应在0-255之间取。
百分数和整数不能混用。
超出临界范围的值会被clamping为最近的边界值。
css3增加了RGBa表示法，RGB后面可加个0-1之间的小数表示透明度，例如rgba(255,100,0,0.5)。alpha值只能用小数表示，不能用百分数。
十六进制RGB表示法和十六进制RGBa表示法   略

HSL和HSLa颜色
HSL颜色由Hue色相、Saturation饱和度和Lightness明度表示。

颜色关键字
transparent和currentColor。currentColor表示当前元素的solor属性的计算值。

7.角度

角度的单位是deg（1圆周为360deg）、grad（1圆周为400grad）和rad（1圆周为2Π个rad）

8.时间和频率

时间值的单位是s或ms。视听css中还有频率，单位是Hz赫兹和kHz千赫兹。不过到16年底的时候，对视听css的支持还很有限
不知道书上说的视听css是什么意思。。

9.位置

position的值
不想看了用到了再细看吧。

10.自定义值

到17年底书快写完的时候，css新出了一个叫自定义属性的东西。但它其实相当于创建变量。
定义的时候用两个短杠开头--
调用的时候用var(变量名)来调用
自定义标识符相当于编程当中的宏，并不是真正的变量，而是死板地把字符替换掉。
自定义标识符有作用域，就是说一个变量定义的时候是在什么选择器下定义的，那么它的作用域就在这个选择器能涵盖的范围里。
可以将css变量与calc结合起来，就能定义有规律的样式，还能节省一堆代码量。
自定义属性在2017年才出来，浏览器具体怎么支持它，还要再看情况。