在CSS中，值的类型有很多种，一些很常见，一些你却几乎没怎么遇到过。我们不会在这篇文档中面面俱到地描述他们，而只是这些对于掌握CSS可能最有用处的这些。本文将会涉及如下CSS的值：
- 数值: 长度值，用于指定例如元素宽度、边框（border）宽度或字体大小；以及无单位整数。用于指定例如相对线宽或运行动画的次数。
- 百分比: 可以用于指定尺寸或长度——例如取决于父容器的长度或高度，或默认的字体大小。
- 颜色: 用于指定背景颜色，字体颜色等。
- 坐标位置: 例如，以屏幕的左上角为坐标原点定位元素的位置。
- 函数: 例如，用于指定背景图片或背景图片渐变。
数值
你会在很多地方看到CSS单位中使用到数值。这一部分将会讨论数值的最常用类别。
长度和尺寸
在CSS布局、排版等等的所有时候，你都会使用到长度/尺寸单位（<length>)。我们不妨先看一个简单的例子——先上HTML：
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>然后是CSS：
p {
margin: 5px;
padding: 10px;
border: 2px solid black;
background-color: cyan;
}
p:nth-child(1) {
width: 150px;
font-size: 18px;
}
p:nth-child(2) {
width: 250px;
font-size: 24px;
}
p:nth-child(3) {
width: 350px;
font-size: 30px;
}结果如下：
在这个例子中我们做了以下事情：
- 分别将每个段落的
margin，padding和border-width设置为5 pixels, 10 pixels 和 2 pixels。一个单独的margin/padding值表示所有的4个面都被设置成同样的值。边框也被设置成了border的缩写值。 - 为三个不同的段落设置越来越大的宽度（
width）像素值，也就是意味着越往下盒子越大。 - 为三个不同的段落设置越来越大字号（
font-size）像素值，也就是意味着越往下文本越大。font-size代表字体/字形的高度。
像素 (px) 是一种绝对单位（absolute units）， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。其他的绝对单位如下：
mm,cm,in: 毫米（Millimeters），厘米（centimeters），英寸（inches）pt,pc: 点（Points (1/72 of an inch)）， 十二点活字（ picas (12 points.)）
除了px之外，你很可能都不怎么使用其他的单位。
也有相对单位，他们是相对于当前元素的字号（ font-size ）或者视口viewport 尺寸。
em:1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em的像素值就会变得复杂。现在不要过于担心这个问题，我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。em是Web开发中最常用的相对单位。ex,ch: 分别是小写x的高度和数字0的宽度。这些并不像em那样被普遍使用或很好地被支持。rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用，所以这听起来像一个比em更好的选择，虽然在旧版本的IE上不被支持。vw,vh: 分别是视口宽度的1/100和视口高度的1/100，其次，它不像rem那样被广泛支持。
使用相对单位是非常有用的-你可以调整你的HTML元素大小相对于你的字体或视口大小，这意味着布局将保持看起来正确，假设举个例子是一个视障用户的话，整个网站上的文本大小是原来的两倍。
无单位的值
你有时候会在CSS遇到无单位的数值，这不总是一个错误，事实上它是在某些情况下，完全可以。例如，如果你想让一个元素完全去除外边框和内边框，你可以只使用无单位的0 — 0就是0，不管前面设置的单位是什么！
margin: 0;无单位的行高
另一个例子是 line-height 设置元素中每行文本的高度。你可以使用单位设置特定的行的高度，但使用一个无量纲的值往往更容易，它就像一个简单的乘法因子。
注：line-height
CSS属性中设置用于行所需要的空间，例如文本。
对于块级元素，它指定元素中线框的最小高度。
在未替换的内联元素中，它指定用于计算线框高度的高度。
对于替代行内元素，如 button 或其他 input 元素，line-height 没有影响。
对于部分替代元素，line-height 依然可以影响元素的样式布局。
动画的数值
CSS动画能够让页面上的HTML元素动起来。我们来看一个例子，当我们把鼠标浮动到一个段落上的时候，它能够旋转起来。这个例子的HTML代码很简单：
<p>Hello</p>CSS有点复杂：
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
p {
color: red;
width: 100px;
font-size: 40px;
transform-origin: center;
}
p:hover {
animation-name: rotate;
animation-duration: 0.6s;
animation-timing-function: linear;
animation-iteration-count: 5;
}这里你可以看到一些我们之前没有明确提到的有趣单位，但是我们感兴趣的是这一行 animation-iteration-count: 5; ——此行控制着动画启动（这里是指光标浮动至段落上）时后会执行多少次，而且这是一个简短无单位纯数字（计算机中称之为整型）。
以下是代码的实际效果：
百分比
还可以使用百分比值指定可以通过特定数值指定的大部分内容。这使我们可以创建，例如，其宽度总是会移动到其父容器宽度的一定百分比的框中。这可以与那些将其宽度设置为某个单位值（如px或ems）的框进行比较，它们的长度总是保持相同的长度，即使它们的父容器的宽度发生变化。
让我们举个例子来说明这个问题。
首先，用HTML标记的两个相似的盒子：
<div>
<div class="boxes">Fixed width layout with pixels</div>
<div class="boxes">Liquid layout with percentages</div>
</div>现在一些CSS来装饰这些盒子：
div .boxes {
margin: 10px;
fo