# 值与单位

# 1、数字，长度和百分比

以下全部归类为数值：

数值类型	描述
`integer`	是一个整数，比如1024或-55。
`number`	表示一个小数——它可能有小数点后面的部分，也可能没有，例如0.255、128或-1.2。
`dimension`	是一个number，它有一个附加的单位，例如45deg、5s或10px。
`percentage`	表示一些其他值的一部分，例如50%。

# 2、长度

# 2.1 绝对长度单位

以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。

单位	名称	等价换算
`cm`	厘米	1cm = 96px/2.54
`mm`	毫米	mm = 1/10th of 1cm
`Q`	四分之一毫米	1Q = 1/40th of 1cm
`in`	英寸	1in = 2.54cm = 96px
`pc`	十二点活字	1pc = 1/16th of 1in
`pt`	点	1/72th of 1in
`px`	像素	1/96th of 1in

这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用cm。惟一一个您经常使用的值，估计就是px(像素)。

# 2.2 相对长度单位

下表列出了web开发中一些最有用的单位。

单位	相对于
`em`	在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
`ex`	字符“x”的高度
`ch`	数字“0”的宽度
`rem`	根元素的字体大小
`lh`	元素的line-height
`vw`	视窗宽度的1%
`vh`	视窗高度的1%
`vmin`	视窗较小尺寸的1%
`vmax`	视图大尺寸的1%

html {
  font-size: 16px;
}

.ems li {
  font-size: 1.3em;
}

.rems li {
  font-size: 1.3rem;
}

1
2
3
4
5
6
7
8
9
10
11

# 3、百分比

在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。

.percent {
  width: 40%;
}

1
2
3

# 4、RGB 和 RGBA的值

.one {
  background-color: rgb(2, 121, 139);
}
.two {
  background-color: rgba(197, 93, 161, .7);
}

1
2
3
4
5
6

# 5、HSL 和 HSLA 的值

与RGB相比，HSL颜色模型的支持稍差一些(在旧版本的IE中不支持)，它是在设计师们感兴趣之后实现的。hsl() 函数接受色调、饱和度和亮度值作为参数，而不是红色、绿色和蓝色值，这些值的不同方式组合，可以区分1670万种颜色：

色调：颜色的底色。这个值在0和360之间，表示色轮周围的角度。
饱和度：颜色有多饱和？它的值为0 - 100%，其中0为无颜色(它将显示为灰色阴影)，100%为全色饱和度
亮度：颜色有多亮？它从0 - 100%中获取一个值，其中0表示没有光(它将完全显示为黑色)，100%表示完全亮(它将完全显示为白色)

.one {
  background-color: hsl(188, 97%, 28%);
}

.two {
  background-color: hsl(321, 47%, 57%);
}

.three {
  background-color: hsl(174, 77%, 31%);
}

1
2
3
4
5
6
7
8
9
10
11

就像RGB有RGBA一样，HSL也有HSLA等效物，它使您能够指定alpha通道值。

.one {
  background-color: hsla(188, 97%, 28%, .3);
}

1
2
3

# 6、函数

在编程中，函数是一段可重用的代码，可以多次运行，以完成重复的任务，对开发人员和计算机都是如此。

CSS 函数用作各种CSS属性的值。

函数	描述
`attr()`	返回所选元素的属性值。
`calc()`	允许您执行计算来确定 CSS 属性值。
`cubic-bezier()`	定义三次贝塞尔曲线。
`hsl()`	使用色相-饱和度-亮度模型（HSL）定义颜色。
`hsla()`	使用色相-饱和度-亮度-阿尔法模型（HSLA）定义颜色。
`linear-gradient()`	将线性渐变设置为背景图像。定义至少两种颜色（从上到下）。
`radial-gradient()`	将径向渐变设置为背景图像。定义至少两种颜色（从中心到边缘）。
`repeating-linear-gradient()`	重复线性渐变。
`repeating-radial-gradient()`	重复径向渐变。
`rgb()`	使用红-绿-蓝模型（RGB）定义颜色。
`rgba()`	使用红-绿-蓝-阿尔法模型（RGB）定义颜色。
`var()`	插入自定义属性的值。

← 5-背景与边框 7-css布局 →