测量单位(Measurement Units)
优质
小牛编辑
126浏览
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;} |