测量单位（Measurement Units）
优质
小牛编辑
125浏览
2023-12-01
在我们开始实际练习之前，我们想简要介绍一下CSS测量单元。 CSS支持许多测量，包括绝对单位，如英寸，厘米，点等，以及相对度量，如百分比和em单位。 在样式规则中指定各种度量时需要这些值，例如border = "1px solid red" 。
我们列出了所有CSS测量单位以及适当的示例 -
| 单元 | 描述 | 例 |
|---|---|---|
| % | 将测量值定义为相对于另一个值的百分比，通常是封闭元素。 | 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 {word-spacing: .15in;} |
| mm | 定义以毫米为单位的测量值。 | p {word-spacing: 15mm;} |
| pc | 定义皮卡的测量值。 异食癖相当于12分; 因此，每英寸有6皮卡。 | p {font-size:20pc;} |
| pt | 以点为单位定义测量值。 一个点定义为1/72英寸。 | body {font-size:18pt;} |
| px | 以屏幕像素定义测量值。 | p {padding:25px;} |
| vh | 1% of viewport height. | h2 { font-size: 3.0vh; } |
| vw | 1% of viewport width | h1 { font-size: 5.9vw; } |
| vmin | 1vw or 1vh, whichever is smaller | p { font-size: 2vmin;} |