当前位置: 首页 > 文档资料 > CSS 入门教程 >

测量单位(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;}
emem空间中字体高度的相对测量值。 因为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;}
vh1% of viewport height.h2 { font-size: 3.0vh; }
vw1% of viewport widthh1 { font-size: 5.9vw; }
vmin1vw or 1vh, whichever is smallerp { font-size: 2vmin;}