Css权威指南(4th，第四版中文翻译)-4.数值与单位

在本章中，我们就来关注下所有CSS里面的值和单位，这是基础中的基础。通过学习，那么你学习后面的内容将会更加得心应手。

---

1. 关键词，字符串和其他文本数值

样式表里基本都是文本，不过也有不少是数字或是颜色等，还有URL或是图片。

关键词

有些特定的词在CSS是有特殊含义的，比如none，如果想要去掉html中超链接的下划线，可以这样做：

a:link, a:visited {text-decoration: none;}

全局关键词

在CSS3中定义了3个全局的关键词，其实这里的全局的额意思是通用的意思，基本上每个属性都可以使用。它们是：inherit， initial和unset。

inherit：这个关键词就是希望元素能够继承父元素的属性。一般来说都不用刻意指定，因为很多属性是自动继承的，不过有些情况就不一定了，举个例子：

  #toolbar {background: blue; color: white;}

    One | Two |
    Three
    

在上面这个例子中，虽然div本身会把样式实现，但是里面的a后代就不会，而是按照浏览器默认的样式进行显示，这时候就可以使用继承属性：

#toolbar a {color: inherit;}

initial: 这个关键词就是要把属性的值进行初始化，比如font-weight的默认值为normal。
虽然这开上去显得比较傻，不过当你明白不是所有值都有初始值的时候想法就会改变。距离来说color的初始值就完全依赖浏览器。这的意思是color一般会从浏览器的默认偏好设置中获取，虽然很少会有人去改默认为黑色的默认值，但万一出现这种情况，将color设置为initial就是让浏览器将默认值重新设置回来。

unset: unset可以同时实现inherit和initial的功能。如果属性继承了，那么unset设置后跟inherit是一样的；如果属性没有被继承，那么unset的效果就跟initial一样。

这些全局的值是所有属性通用的，但有个属性只接受全局的关键词，那就是all：

3_1.png

all代表了除了direction和unicode-bidi的所有属性，所以说如果在一个元素上设置了all：inherit，那么意思就是让所有的属性都从父元素中继承下来。来看个例子：

section {color: white; background: black; font-weight: bold;} 
#example {all: inherit;}

  
This is a div.

你可能会想div应该继承了section定义的color，background和font-weight属性，没错，事实确实这样，不过不仅仅是这些，所有section有关的属性都会被继承。所以有时候这并不是想要的结果，如果你只是想要继承section定义的那几个属性，那么可以这样写：

section {color: white; background: black; font-weight: bold;} 
#example {color: inherit; background: inherit; font-weight: inherit;}

字符串

字符串需要注意的点不多，一个是必须以',''这两种分隔符来包围，另一个是在字符串中需要引用其他字符时需要转义。例如换行符就是在\A后面直接加：

 "This is a better place \Afor a newline."

而如果只是想在书写时换行，而在显示时不换行，则直接在行末用\符号就行了，在实际显示时解析器会自动忽略，下面两个字符串是一样的效果：

 "This is the right place \
    for a newline."
    "This is the right place for a newline."

URL

如果你写过网页，一定很熟悉URL了，统一的格式基本都是：

url(protocol://server/pathname)

这个例子中定义了一个绝对路径，绝对路径到哪都是通用的，而相对路径相对于的是使用的文档，其通用形式为：

url(pathname)

在CSS中，相对路径相对的是样式本身，而不是引用样式的HTML文档（很重要）。举例来说，如果有个外部样式import了其他样式，那么使用一个相对路径来引用的时候，这个相对路径相对的是第一个样式文件。
比如一个html文档的地址为：http://web.waes.org/toppings/ tips.html, 而在文档中应用的样式为：

而在basic.css中引入另一个样式：

@import url(special/toppings.css);

那么猜猜浏览器搜寻toppings.css的路径是什么呢？答案就是http:// web.wa es.org/styles/special/toppings.css,而不是http://web.wa es.org/toppings/ special/toppings.css.

注意在url和括号之间是没有空格的,如果有空格则整个表达式会报错并被忽略：

body {background: url(http://www.pix.web/picture1.jpg);} /* correct */
body {background: url (images/picture2.jpg);} /* INCORRECT */

图片

图片的语法是，它的值就是一个的值，在高级的浏览器中，代表了下面三种特性：

1. : 一个指向外部资源的地址；
2. ：一系列的图片来针对不同的设备及尺寸来显示不同。截止2016年末，浏览器中支持image-set的只有safari，chrome和桌面版的Opera。
3. ：定义图片的渐变，可以是linear线性的或是radial辐射的，将在第九章详细介绍。

标识符

有些属性可以接受用户自己定义的某些符号，而最多的就是生成的list counter。标识符(Identifier)本身其实是一些区分大小写的单词，只要不和CSS本身定义的重复就可以了。

---

2. 数值和百分比

这两类是后面很多值类型的基础，举例来说，font-size就可以用em标识符，前面跟上对应的数值来表示。具体到底有哪些数值类型，我们一一看下。

整型

整型是最常见的，前面可以跟+-号来表示正负。

通用数字

这里指的是包括上面整型和浮点型的数字，也支持正负表示。不过有些属性（像z-index）只接受整型，而有些数字只接受浮点型(像flex-grow)。

百分比

number后面跟%，百分比都是有一个参考的，一般都是元素的父元素。

分数

分数值后面跟着fr的标识，例如一分就是1fr，这个概念是在Grid布局中提到的，主要用于在一个未受限的空间中对空间进行分割，我们将在第13章详细讨论。

---

3. 距离

很多的CSS特性都需要用到长度的测量，而在CSS也有多种测量方式。从表达式来看长度单位基本都是相同的，正负号后跟一个单位，数字的话包括整数，小数等。有个特例就是0，不需要跟单位。而所有的值按照布局特点可以分为绝对长度单位和相对的长度单位。

绝对长度单位

一共有6种的绝对单位：

1. 英寸(inches, in)
   参照的是美国的英寸计量单位，果然美国对CSS的贡献还是挺大的。
2. 厘米(cm)
   国际标准单位
3. 毫米(m)
   国际标准单位
4. 四分之一毫米(q)
   奇葩的单位，貌似只有Firefox上会使用，只能说脑洞真大。
5. 点(Points, pt)
   印刷单位, 一英寸分布72个点。
6. Picas(pc)
   Picas是另一个印刷的单位，1pc=12pt, 6pc=1in

7.像素(px)
像素本身就代表屏幕上的一个点，不过在CSS里面对像素的定义更加抽象：每英寸上面覆盖96个像素。不过很多浏览器是不太在意这个定义的，在页面放大缩小或者打印的时候，会引入一个叫尺寸因子的变量(scaling factor)来调整实际的显示像素，设置为100px的元素实际显示时可能就会有变化。

绝对的单位在打印文档里面特别有用。

像素长度

像素其实显示出来就是一个个马赛克，如果你放大看的话。

分辨率单位

随着media query和响应式设计的引入，出现了三种描述显示分辨率的单位：

1. Dots per inch （dpi）
   定义为每英寸上的显示dot数

2. Dots per centimeter（dpcm）
   跟dpi类似，只不过长度换成了1厘米。

3. Dots per pixel unit （dppx）
   每个CSS px单元所显示的dot数目。对于CSS3来说，1dppx等于9dpi。不过很有可能未来的CSS版本中会有所修改。
   截止2017年末，上述三个单位还只能用在媒体查询中。举个例子：

@media (min-resolution: 500dpi) { /* rules go here */
}

相对长度单位

之所以称为相对是因为其数值是有一个参照值的，因此相对值最终显示的结果依赖于多个因素，比如说屏幕的分辨率，视口的宽度，用户的偏好设置等等。

em和ex单位

首先我们来看看em和ex单位，这两个非常接近。em的定义为相对于一个给定字体的font-size。所以其实你就可以想见每个元素都可以是不一样的基准值，还是距离来说，分别定义h1，h2, p三个元素的字体大小，然后再基于此顶一个通用的margin-left，来看下效果：

h1 {font-size: 24px;}
h2 {font-size: 18px;}
p {font-size: 12px;}
h1, h2, p {margin-left: 1em;} small {font-size: 0.8em;}
Left margin = 24 pixels
 
Left margin = 18 pixels
 
Left margin = 12 pixels

4-3.png

当设定玩字体大小后，em的值是相对于父元素的font-size的。有人会很好奇，这个em的命名是怎么来的，理论上说这是个印刷术语，e代表equal， m代表小写的m，而这个m是一个老的印刷术语。类比下em，那ex的定义是小写x的高度。
可能不好理解，来举个例子：如果两个段落的字体大小都是24ex，但每个段落的字体是不相同的，那么最后显示的结果也是不相同的，因为每个字体中对于小写x的高度都是不一样的。

4-4.png

rem单位

就像em单位一样，rem单位也是基于字体的大小。不同的是rem相对的对象是root根元素。在HTML中就是html元素。
来看下面的例子：

 This paragraph has the same font size as the root element thanks to inheritance.

  
This paragraph has the same font size as its parent
element.
  
This paragraph has the same font size as the root
element.
 

4-5.png

从效果上看rem修正了传统的从祖先继承的字体大小。根元素字体可以这样设置：

html {font-size: 13px;}

那如果根元素设置的是百分比怎么办？

html {font-size: 75%;}

那其实这个百分比相对的是用户的默认大小。

ch单元

ch单位是CSS3新加入的，代表的是'one character'，CSS3的官方定义为：

Equal to the advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it.

CSS中将ch对应到某个字体中字符0的‘宽度’，这和em的计算方式是很接近的。那么怎么才能直观的看到ch是基于字符宽度来定义的呢。下面的例子我们给出不同字体时的显示效果，上面是对应的字符个数，下面是对应的基于img的ch样式设置，来对比下吧：

img {height: 1em; width: 25ch;}

4-6.png

如果是等宽字体（monospace font）的话，所有的字符宽度正好都是1ch，而在比例字体中（覆盖绝大部分西文字体），字符可能与‘0’的宽度有变化，所以不一定是1ch。

跟视口相关的单位

另一块在CSS3中引入的单位是3个跟视口相关的。那什么是视口的，很多情况下就是你所看到的显示区域，对于浏览器来说是它的窗口大小，对于打印设备来说是它的打印范围等等。

1. 视口宽度单位（viewport width unit， vw）
   这一单位将视口的宽度进行了100等分，例如如果宽度为937px的话，那么1vw就是9.37px。

2. 视口高度单位(viewport height unit, vh)
   同上讲视口高度100等分。

3. 视口最小单位（viewport minimum unit， vmin）
   vmin的取值为同时对视口宽度和高度进行100等分，然后取两个方向上最小的一分作为其值。例如对于一个宽度937px，高度650px，那么1vmin就等于6.5.

4. 视口最大单位（viewport maximum）
   跟上面相对取最大值，例如对于一个宽度937px，高度650px，那么1vmax就等于9.37px.

来看个具体的例子：

div {width: 50vh; height: 33vw; background: gray;}

4-7.png

上面有没有发现，vh和vw其实不是限定在自己的坐标轴上的，width同样可以用vh的高度单位来设置。

---

4. 计算数值

有时候需要计算相关的数值，CSS本身提供了calc()来处理。在括号里面可以放入简单的数学表达式，加减乘除和括号都是可以的。
举个例子，如果想要将宽度设置为父元素的90%减去2em，就可以这样写：

p {width: calc(90% - 2em);}

有没有发现calc中的数值可以有2种方式，其实像长度，频率，角度，时间，百分比，数值都是允许的。不过如果以为可以随便乱用的就大错特错了，在计算前calc会做检查来确保数值的计算兼容性：

1. 加减号的两边必须是相同的类型。例如5+2.7是可以的，而5em+2.7就不允许，而5em + 20px就是允许的，因为em和px都是长度单位，而5em和2.7，前者是长度单位，后者却不是。
2. 如果是乘号，那么符号两边至少得有一个数字，比如2.5rem * 2或是2 2.5rem都是可以的，但是2.5rem * 2rem就是不合理的。
3. 如果是除号/，那么右边的元素必须是数字.
4. 除号右边是0也是不允许的。

另外一个值得注意的限制就是加减号两边都得有一个空格，而乘除就没有这个要求，这个要求主要为了区别负数。
同样在标准中也规定了calc中的表达式的操作数上限为20个，如果超过这个限制，也会被认为是无效的表达式。

---

5. 属性数值

在一些css属性中，还可以吧html元素的属性获取到，这要借助attr()表达式。

p::before {content: "[" attr(id) "]";}

没怎么见过，没事，我们将在15章里面详细说明。上面这个表达式的功能就是在p的before位置放置内容，而这个内容是由[]加上

中的id字段组成的。来看下：

This is the first paragraph.
 
This is the second paragraph.
This is the third paragraph.

4-8.png

理论上来说任何属性值都可以通过attr()获取到。

input[type="text"] {width: attr(maxlength em);}

同样是理论上，上面的input元素的宽度被设置为10em。

---

6. 颜色

学习css的第一个问题很可能是怎么设置我页面上的颜色，而一般有两种选择：一是使用一定数量的预先定义好的颜色名称，比如red，purple等；二是使用16进制的颜色来表示。

有名称的颜色

最早由16种基本的颜色，这些颜色是在HTML 4.01定义的：

t4-1.png

还是举个例子吧：

h1 {color: silver;} 
h2 {color: fuchsia;} 
h3 {color: navy;}

4-9.png

截止到2017年年底，最新的CSS颜色已经扩展到了148中，全部的列表会在附录C中列出。这些都是由CSS的Color Module Level 4定义的。

RGB和RGBa

很多人都知道RGB，但是不知道哦括号中除了正整数还可以传百分比，0%~100%， 整数范围0~255.
比如下面用百分比定义了黑白色：

 rgb(100%,100%,100%)
 rgb(0%,0%,0%)

再用整数实现一遍：

rgb(255,255,255)
rgb(0,0,0)

不过请记住，不要混用百分比和数值。例如像这样的表达式是明显错误的：rgb(255,66.67%,50%).为了更好的显示rgb的颜色变化，我们来挨个遍历下：

p.one {color: rgb(0%,0%,0%);} 
p.two {color: rgb(20%,20%,20%);} 
p.three {color: rgb(40%,40%,40%);} 
p.four {color: rgb(60%,60%,60%);} 
p.five {color: rgb(80%,80%,80%);} 
p.six {color: rgb(0,0,0);} 
p.seven {color: rgb(51,51,51);}
p.eight {color: rgb(102,102,102);} 
p.nine {color: rgb(153,153,153);} 
p.ten {color: rgb(204,204,204);}

4-10.png

另外，rgb中分数的百分比也是支持的

h2 {color: rgb(25.5%,40%,98.6%);}

如果给定数值超出了范围，那么浏览器就会自动修正到最接近的值：

P.one {color: rgb(300%,4200%,110%);} /* 100%,100%,100% */ 
P.two {color: rgb(0%,-40%,-5000%);} /* 0%,0%,0% */ 
p.three {color: rgb(42,444,-13);} /* 42,255,0 */

rgba 颜色

在CSS3中，rgba在rgb三通道的前提下新增了alpha透明度通道，如果想要半透明效果，则可以：

 rgba(255,255,255,0.5)
 rgba(100%,100%,100%,0.5)

alpha通道设定的范围为[0,1]，0代表完全透明，1代表完全不透明。所以说 rgb(0,0,0) 和 rgba(0,0,0,1) 是完全一样的。来看几个简单的例子：

p.one {color: rgba(0,0,0,1);} 
p.two {color: rgba(0%,0%,0%,0.8);} 
p.three {color: rgba(0,0,0,0.6);} 
p.four {color: rgba(0%,0%,0%,0.4);} 
p.five {color: rgba(0,0,0,0.2);}

4-11.png

跟上面一样，你可以可以超出范围，不过系统会自动修正，因为是0到1范围的值，所以用百分比也是可以的。

16进制的rbg颜色

16进制颜色长啥样呢：

h1 {color: #FF0000;}  /* set H1s to red */
h2 {color: #903BC0;}  /* set H2s to a dusky purple */
h3 {color: #000000;}  /* set H3s to black */
h4 {color: #808080;} /* set H4s to medium gray */

16进制颜色在web设计上已经有悠久的历史了，最早是在HTML，后面CSS也引进过来。组成也很简单，对应于rgb的三个通道，这里用范围[00, FF]的值来表示一个通道，然后再把三个通道连在一起，因此想rgb(255,255,255)就等价于#FFFFFF.其本质都是用1个字节的数据来表示一个通道的颜色值。
16进制中每个通道相同的数值可以简写：

h1 {color: #000;}  /* set H1s to black */
h2 {color: #666;}  /* set H2s to dark gray */
h3 {color: #FFF;} /* set H3s to white */

那么浏览器是怎么实现的呢？其实当检测到是3位的时候，浏览器读取每一位，然后将其替换一下。比如#6FA替换为#66FFAA。

16进制的rgba颜色

截止到2017年底，为16进制颜色引入了第4个16进制的值，来对应rgba的alpha通道。来看下例子吧：

p.one {color: #000000FF;} 
p.two {color: #000000CC;} 
p.three {color: #00000099;} 
p.four {color: #00000066;} 
p.five {color: #00000033;}

4-12.png

第4位同样享受之前说的缩进，#663399AA 可以写成#639A。所以说综上其实16进制的#后面可以跟3位，4位，6位，8位共4种长度的数值。

HSL和HSLa 颜色

CSS3中引入了HSL颜色，三个字母分别代表Hue（色调），Saturation（饱和度），Lightness（亮度）。这是描述颜色的新的3个维度。其中色调的范围是[0,360]的角度值，饱和度的范围是[0, 100]的百分数值，亮度也是[0, 100]
的数值。色调在展示的时候是一个彩色的圆环，红色为0度，就像下面这张图：

4-13.png

色调可能还好理解，但是饱和度和亮度可能有点难度。饱和度其实表现的是颜色的密度。如果饱和度设为0%那么就是一片灰，无论色调设置为啥都是一样的，而饱和度设置为100%则会在给定亮度下覆盖全部的颜色区域。同理，亮度表现的是颜色的亮暗，如果亮度等于0%就变成黑色，而如果设置为100%就会变成白色。具体的来看几个例子吧：

p.one {color: hsl(0,0%,0%);} 
p.two{color: hsl(60,0%,25%);} 
p.three {color: hsl(120,0%,50%);} 
p.four {color: hsl(180,0%,75%);} 
p.five {color: hsl(240,0%,0%);} 
p.six {color: hsl(300,0%,25%);} 
p.seven {color: hsl(360,0%,50%);}

4-15.png

我们可以把之前说的16个命名的颜色映射到图上，看下他们的位置：

4-16.png

就像rgb有rgba一样，hsl也有hsla，alpha的范围还是[0, 1]：

p.one {color: hsla(0,0%,0%,1);} 
p.two {color: hsla(0,0%,0%,0.8);} 
p.three {color: hsla(0,0%,0%,0.6);} 
p.four {color: hsla(0,0%,0%,0.4);} 
p.five {color: hsla(0,0%,0%,0.2);}

颜色的关键词

对于颜色来说有两个比较重要的关键词: transparent和currentColor。基本上能用到颜色的地方都可以使用。
transparent顾名思义就是把颜色设置为透明，等同于rgba(0,0,0,0)。虽然在设置文本颜色的时候很少使用，不过像元素的背景默认色，渐变等都是非常常见的。

而curentColor就有点意思了，它有点像个颜色的提取器，将本元素的color属性值提取出来作为参数值。举个例子：

main {color: gray; border-color: currentColor;}

这就把gray复制到了border-color。

---

7. 角度

我们刚刚讨论到了HSL颜色里面H就是用角度来设置的，那这个角度到底怎么表示呢？在文章中我们取个代号，数值的组成就是数字加个后缀，后缀有下面4种：

1. deg: 跟数学上一样，360度一圈
2. grad： 用的比较少，400grad环绕一圈,英文中还有专门的术语grades或是gons
3. rad： 这就比较熟悉了，2π 环绕一周
4. turn：相当于一圈，这个单位特别在动画旋转的时候很有用，因为有时候你需要让某个元素旋转几圈。

值得注意的是，角度单位大多是用在2D和3D的tranform中，尤其在HSL颜色中，角度单位是不能用的，因为色调的角度数值默认就是deg。

---

8. 时间和频率

为了表述一段时间，引入了时间的单位，组成的话由数字和后面的单位组成。单位只有两种：s（秒）和ms（毫秒）。时间的单位大多是也是用在过渡和动画中，举个例子：

a[href] {transition-duration: 2.4s;} 
a[href] {transition-duration: 2400ms;}

接着介绍下频率单位，有赫兹hz和千赫mhz，单位大小写是不敏感的，也来两个例子：

h1 {pitch: 128hz;} 
h1 {pitch: 0.128khz;}

---

9. 位置

位置单位主要用于在背景范围内如何摆放元素，不过其语法还是有点复杂的：

t4-2.png

如果你只定义了一个值，那么第二个值center是默认带上的，例如left等于left center。而且在值得设置上，如果给了2个值，例如25% 25px， 那么前者默认是表示水平方向，后者默认是表示垂直方向。所以像25% left的这种表达式都是不合理的。但是另一方面，如果你给的2个值虽然顺序反了，但是正好覆盖了水平和垂直方向，也是可以的。比如：right 35px。

接下来考虑4个值的情况，那么规则是第2和第4个值作为水平和垂直方向的偏离值，例如right 10px bottom 30px就表示从右边起10px的位置和从底部起30px的位置。

有人会问，那传入3个值怎么办，那么规则对标4个值的情况，只不过第4个值默认是0.

---

10. 自定义数值

本书是在2017年底写成的，而截至到这时候，正好CSS有新的特性添加，称为custom properties。可以称为自定义属性吧，不过它们的主要用途其实就是创建css的变量，来看个例子：

html {
--base-color: #639; --highlight-color: #AEA;
}
h1 {color: var(--base-color);}
h2 {color: var(--highlight-color);}

4-17.png

注意声明css变量的语法，前面有两个横杠--，变量是大小写敏感的，所以这两个值--main-color 和 --Main-color是不一样的。
虽然这些值很容易被称为CSS变量，不过不要真把它们当成变量了，它们其实更像是宏，定义完后会把对应的位置做一个替换。

另一个有意思的关于自定义属性的特点就是它们其实是有上下文的，来看个例子：

html {
--base-color: #639;
} aside {
--base-color: #F60; }
h1 {color: var(--base-color);} 
Heading 1
Main text.

Heading 1
An aside.

Heading 1
Main text.
 

4-18.png

如果害怕有兼容性问题，可以采取下面的方式来进行兼容：

@supports (color: var(--custom)) {
/* variable-dependent styles go here */
}
@supports (--custom: value) {
        /* alternate query pattern */
}