在开始实际练习之前，我们想简要介绍一下CSS测量单位. CSS支持许多测量，包括绝对单位，如英寸，厘米，点等，以及相对度量，如百分比和em单位.在样式规则中指定各种度量时需要这些值，例如 border ="1px solid red".
我们列出了所有CSS测量单位以及正确的示例 :
| Unit | 描述 | 示例 |
|---|---|---|
| ％ | 将测量值定义为相对于另一个值的百分比，通常是一个封闭元素. | p {font-size:16pt; line-height:125％;} |
| cm | 以厘米为单位定义一个度量. | div {margin-bottom:2cm;} |
| em | em空间中字体高度的相对测量值.因为em单位等于给定字体的大小，所以如果你将字体指定为12pt，则每个"em"指定一个字体.单位是12pt;因此，2em将是24pt. | p {letter-spacing:7em;} |
| ex | 此值定义相对于字体x高度的测量值. x高度由字体的小写字母x的高度决定. | p {font-size:24pt; line-height:3ex;} |
| in | 以英寸为单位定义测量值. | p {字距:.15in;} |
| mm | 以毫米为单位定义测量值. | p {字间距:15mm;} |
| pc | 定义皮卡的测量值.异食癖相当于12分;因此，每英寸有6皮卡. | p {font-size:20pc;} |
| pt | 以点为单位定义测量值.一个点被定义为1/72英寸. | body {font-size:18pt;} |
| px | 以屏幕像素定义度量. | p {padding:25px;} |
| vh | 视口高度的1％. | h2 { font-size:3.0vh; } |
| vw | 视口宽度的1％ | h1 { font-size:5.9vw; } |
| vmin | 1vw或1vh，以较小者为准 | p {font-size:2vmin;} |
