单位可以影响颜色、距离和尺寸等一些列属性，可以帮助定义这些值。单位是CSS的重要基础，几乎一切值都离不开它
一、关键字
有时，值用一个词表示，这叫关键字。
比如说：none 是一个十分常见的关键字，在不同的属性中相同的关键字可能具有不一样的行为。
1.1、全局关键字
CSS3 定义了几个“全局”关键字，规范中的每个属性都能使用：
-
inherit
inherit 把元素某个属性的值设为与父元素同一属性的值一样。也就是说，这个关键字强制继承
#div {
color: cyan;
}
#div a {
color: inherit;
}
-
initial
initial 把属性的值设为预定义的初始值 -
unset
unset 是 inherit 和 initial 的通用替身。对继承的属性来说，unset 的作用与 inherit 一样；对不继承的属性来说，unset 的作用与 initial 一样。
这三个全局关键字在所有的属性中都可以使用。有个特殊的属性只接受这几个全局关键字：
- all
all 表示除了 direction 和 unicode-bidi 之外的所有属性
#box { color: white; background: black; font-weight: blod; }
#box div { all: inherit; }
二、数值和百分数
这两种值的特别之处在于，他们是很多其他类型值的基础。
例如，字号可以使用一个数字和 em 标识符（后文说明）定义。
2.1、整数
整数值很好理解，由一到多个数组成，前面还可以有 + 或 - 号，分别表示正数和负数。整数用<integer>表示。取值范围外的整数值默认是无效的，按照某些属性的定义，取值范围外的整数会被设为与所用值最接近的数，这种行为称为clamping。
2.2、数字
数值值是 ****<integer>*** 或实数，后者指整数后跟一个点号，再跟着一些整数。此外，前面可以加上 + 或 -，表示正数或负数。在取值句法中，数字用<number>表示。与整数值一样，对于取数字值的属性来说，按照定义，取值范围可能有限。例如，opacity 属性的值被限制在 0 到 1 之间的有效 <number>
2.3、百分数
百分数值在 <number> 后跟一个百分号(%)，在取值句法中用<percentage>表示。
2.4、弹性值
弹性值(fraction value 或 flex value) 是 <number> 后跟 fr。这个概念由栅格布局引入，用于把布局中不受限制的空间分成几部分。
三、距离
很多 CSS 属性 （例如外边距） 要考长度度量衡才能正确显示页面中的各个元素。毫不意外，CSS 中有很多度量长度的方式。
长度单位分为两种：
- 绝对长度单位
- 相对长度单位
3.1、绝对长度单位
先介绍绝对长度单位，因为它们最易于理解，不过 Web 设计中使用相对较少。绝对长度单位有七个，说明如下：
-
英寸（in）
指美国尺子所用的英寸(没啥用，几乎都使用 米制 系统) -
厘米（cm）
指世界上其他地方使用的尺子上的厘米。1英寸等于2.54厘米，1厘米等于0.394英寸。 -
毫米（mm）
1厘米等于10毫米，1英寸等于0.394毫米，1毫米等于0.0394英寸 -
四分之一毫米（q）
1厘米中有 40 个 q 单位 -
点（pt）
点是一个标准的印刷度量单位，在打印机和打字机上已经使用数十年，字处理程序也使用多年了。按惯例，1 英寸有 72 点 -
派卡（pc）
派卡（pica）也是印刷语。1 派卡 等于 12点，因此 1英寸有6派卡。 -
像素（px）
像素是屏幕上的小点，不过 CSS 定义的像素较为抽象。在 CSS 中，1 像素所占的尺寸够 1英寸中放下 96 像素。很多用户代理忽略这个定义，而是直接使用屏幕上的像素。缩放页面或打印时要考虑缩放，此时 100px 宽的元素渲染后得到的宽度可能大于设备上的 100 小点。
3.2、分辨率单位
随着媒体查询和响应式设计的出现，为了描述显示器的分辨率，出现了3 个新单位。
-
点每英寸 (dpi)
在长为1英寸的范围内能显示的点数。可以指打印机输出的点，也可以指 LED 屏幕等设备上的物理像素点。 -
点每厘米 (dpcm)
与 dpi 类是，不过测量的范围是 1 厘米。 -
点每像素单位 (dppx)
CSS 中每个 px 单位显示的点数。从 CSS3 起，1dppx 相当于 96dpi，因为 CSS 就是按照这个换算比例定义像素单位。
在媒体查询中使用
@meida (min-resolution: 500dpi) {
/* */
}
3.3、相对长度单位
相对长度单位中的 “相对” 是指长度是相对其他东西而言的。
-
em
“em” 这个名称的由来是因为，1em 等于所用字体中小写字母 m 的宽度。如果使用 em 设定字号，那么它相对父元素的字号(font-size)而言。1em 等于元素的 font-size属性值。如果元素的font-size 为14像素，那么对那个元素来说，1em 就等于 14 像素。 -
ex
ex指所用字体中小写字母 x 的高度。所以，如果两个段落的字号都是 24 点，但是使用的字体不同，那么 ex 的值也是不一样的。 -
rem
与 em 单位类似，rem 也基于声明的字号。二者之间的区别是（很微小），- em 相对当前元素的字号计算
- rem 始终相对根元素(html)计算
-
ch
CSS3 新增来了这个有趣的单位：ch。这个单位基本上可以理解为“一个字符。”CSS3 规范是这样定义的：
等于渲染时所用字体中“0”（零，U+0030）字形的进距。
为了更好地理解这个单位，我们可以把一串零放在一起，然后下面放一个图像，把图像的宽度设为与零的个数一样。
<style>
* {
margin: 0;
padding: 0;
}
img {
height: 1em; width: 25ch;
}
</style>
</head>
<body>
<p>0000000000000000000000000</p>
<img src="xxx.jpg" alt="">
根据字符计算尺寸
视区相关单位
-
视区宽度单位（vw）
这个单位根据市区的宽度计算，然后除以100。如果视区的宽度是 937 像素，那么1vm 等于 9.37px -
视区高度单位（vh）
这个单位根据视区的高度计算，然后除以100。 -
视区尺寸最小单位（vmin）
这个单位等于视区宽度或高度的 1/100，始终取宽度中较小的那个。如果，视区的宽度为 937 像素，高度为 650 像素，那么 1vmin 等于 6.5px -
视区尺寸最大值单位（vmax）
这个单位等于视区宽度或高度的 1/100，始终取宽度和高度较大的那个。
这些是长度单位，因此在任何允许使用长度单位的地方都能使用。比如说，可以根据视区的尺寸缩放标题的字号。
3.4、计算值
为方便数学计算，CSS 提供了 calc() 值。括号中可以使用简单的数学算式。允许使用的运算符有 +、-、*、/，以及括号。
假设想让段落的宽度比父元素宽度的 90% 少 2em。
p { width: calc(90% - 2em) }
在允许使用这些值的地方，都能使用 calc()，不过有些限制需要注意：
- + 和 - 号两侧的值必须使用相同的单位类型，或者是 <number> 和 <integer>（此时结果为<number>值）。
如下示例：
-
5 + 2.7是有效的，结果为 7.7 -
5em + 2.7无效，因为以便有长度单位，一边没有 -
5em + 20px有效，因为 em 和 px 都是长度单位。
- 计算的两个值中必须有一个是 <number>。
如下示例：
-
2.5rem * 2 和 2 * 2.5rem都是有效的。 -
2.5rem * 2.5rem是无效的，因为这样得到的结果是 5rem²
- / 计算的两个值中右边的那个必须是 <number>。
如下示例
-
3.em / 2.75是有效的 -
3. / 2.75em是无效的
- 任何情况下都不能除以零。
此外，规范要求用户代理至少支持 calc() 中的算式可以使用 20个 算子，算子可以是数字、百分数，也可以是大小量(长度)。超过这一限制的算式应该视为无效的。
四、颜色
4.1、具名颜色
吐过只想使用基本的颜色值，最简单的方法是使用颜色的名称。CSS 把这种颜色称为 具名颜色(named color)。例如：red(红色)，天蓝色(skyblue)。截至2017年年末，一共有 148个颜色关键字。
4.2、RGB 和 RGBa 颜色
rgb(color)，其中 color 是三个值，可以是百分数或整数。百分数的取值范围是 0 ~ 100%，整数的取值范围是 0 ~ 255
rgb(100%, 100%, 100%)
rgb(255, 255, 255)
一个颜色值中不能混用整数和百分数。
rgba，RGB 的三个通道后面增加了一共 alpha 值，即 “ red-green-blue-alpha”。alpha 指 alpha 通道，用于衡量不透明度，取值范围为 0 ~ 1。
rgba(100%, 100%, 100%, 0.5)
rgba(255, 255, 255, 0.5)
4.3、十六进制值
十六进制表示法与 三个整数表示法在数值上是等效的。例如，rgb(255, 255, 255) 与 #FFFFFF 完全等效。
如果 每个十六进制 中的两个数字相当，CSS 允许使用简短表示法
h1 { color: #008833 }
h1 { color: #083 }
十六进制 RGBa 颜色
(截至2017年年末) 有个新的十六进制表示法在后面添加一个十六进制值，表示 alpha通道的值。
p { color: #00000099 }
p { color: #0009 }
4.4、HSL 和 HSLa 颜色
CSS3 新增了 HSL 表示法。
-
Hue(色相)
角度值，取值范围是 0 ~ 360 -
Saturation(饱和度)
饱和度是从 0(无饱和度) ~ 100(完全饱和)的百分数 -
Lightness(明度)
明度是从0(全暗) ~ 100(全明)的百分数
p { color: hsl(180, 0%, 75%); }
HSLa，对应的，在 HSL 的三个值后面加上一共 alpha 值，取值范围是 0 ~ 1。
p { color: hsla(180, 50%, 50%, 0.6); }
4.5、颜色关键字
有两个特殊的关键字可以在任何允许使用 颜色值 的地方使用： transparent 和 currentColor
-
transparent：表示完全透明的颜色，
与 rgba(0, 0, 0, 0) 等效。 - currentColor：表示当前元素 color 属性计算得到的值。
main { color: gray; border-color: currentColor; }
五、角度
角度一般使用 <angle> 表示，即一个 <number> 后跟下列四个单位中的一个。
-
deg
度数，完整的圆周是 360 度。 -
grad
百分度（gradian，也叫 grade 或 gon），完整的圆周是 400 百分度。 -
rad
弧度，完整的圆周是 2PI -
turn
圈数，一个完整的圆周是一圈。这个单位在旋转动画中最有用。比如说让一个元素旋转 10 圈 就是 10turn
六、时间和频率
属性的值为一段时间时，使用 <time> 表示，它是 一个 <number> 值后跟 s(秒) 或 ms(毫秒)。时间值最常在过度和动画中使用，用于定义持续时间或延续时间。
a { transition-duration: 2.4s; }
a { transition-duration: 2400ms; }
视听 CSS 中还有一个值 <frequency>，它是一个 <number> 值后跟 HZ(赫兹)或 KHz(千赫兹)，这个单位的标识符不区分大小写。
h1 { pitch: 128hz; }
h1 { pitch: 0.128khz; }
七、自定义值
它的作用其实是在 CSS 中创建变量。并不是创建特殊的 CSS 属性(比如 color 之类的)。自定义属性有一个有趣的特性：作用域在一定的范围内
<style>
html {
--base-color: #639;
}
aside {
--base-color: #f60;
}
h1 {
color: var(--base-color);
}
</style>
</head>
<body>
<h1>Heading 1</h1><p>Main text.</p>
<aside>
<h1>Heading 1</h1><p>An aside.</p>
</aside>
<h1>Heading 1</h1><p>Main text.</p>
</body>
自定义值在特定的范围内起作用
如果担心浏览器的支持情况，可以利用 查询特性
@supports (color: var(--custom)) {
/* 使用变量的样式 */
}
@supports (--custom: value) {
/* 替代样式 */
}
网友评论