CSS - 单位

CSS 单位定义用于指定值的测量系统。CSS 提供了许多不同的单位来表示长度和测量。CSS 单位用于指定页面元素或其内容的属性大小。

在 CSS 中，有多种方法可以指定和测量长度。它用于指定边距、内边距、字体大小、宽度、高度、边框等。

例如 - **font-size: 50px**，这里的数字 **50** 后缀为 **px**，即 **像素**，它是一个 CSS 测量单位。

数字和单位之间不应有空格。当值为 0 时，可以省略单位。

长度单位

长度单位可以分为两种类型

**绝对单位：** 固定长度单位，不依赖于屏幕宽度。
**相对单位：** 响应式长度单位，会根据屏幕宽度而变化。

绝对长度单位

这些单位被归类为固定长度单位，这意味着使用绝对单位指定的长度在屏幕上保持精确不变的大小。

当浏览器拥有关于屏幕属性、使用的打印机或其他合适的用户代理的全面信息时，这些单位将非常有效。

下表包含所有类型的绝对单位

单位	描述	等效值	示例
mm	指毫米，用于指定毫米测量。	1mm = 1/10cm	font-size: 10mm;
cm	指厘米，用于指定厘米测量。	1cm = 37.8px = 25.2/64in	font-size: 5cm;
Q	指四分之一毫米，用于指定厘米测量。	1Q = 1/40cm	font-size: 5Q;
in	指英寸，用于指定英寸测量。	1in = 2.54cm = 96px	font-size: 1in;
pt	指磅，用于指定磅测量。	1pt = 1/72in	font-size: 20pt;
pc	指派卡，用于指定派卡测量。	1pc = 1/6in	width: 6pc;
px	指像素，用于指定像素测量。	1px = 1/96in	font-size: 15px;

绝对单位对于响应性不是优先考虑的项目来说非常有价值。但是，对于响应式网站来说，它们不太有益，因为它们不会在屏幕尺寸变化时进行调整。

示例

这是一个使用绝对单位 (mm、cm、in、Q) 的字体大小示例

<html>
<head>
    <style>
        .unit-mm {
            font-size: 5mm;
        }
        .unit-cm {
            font-size: 1cm;
        }
        .unit-inch {
            font-size: 0.5in;
        }
        .unit-quarter {
            font-size: 40Q;
        }
    </style>
</head>

<body>
    <h1 class="unit-mm"> Font size 5mm </h1>
    <h1 class="unit-cm"> Font size 1cm </h1>
    <h1 class="unit-inch"> Font size 0.5inch </h1>
    <h1 class="unit-quarter"> Font size 40Q </h1>
</body>
</html>

相对长度单位

相对长度单位是相对于其他元素或屏幕视口进行测量的。

相对单位非常适合为响应式网站设置样式，因为它们可以根据窗口大小或父元素按比例调整。这些单位定义相对于其他长度属性的长度。

下表包含所有类型的相对单位

单位	描述	示例
em	相对于元素的字体大小。	font-size: 4em;
ex	相对于当前字体的 x 高度。	font-size: 4ex;
ch	相对于“0”的宽度。	font-size: 4ch;
rem	相对于根元素的字体大小。	font-size: 2rem;
lh	相对于元素的行高。	font-size: 4lh;
rlh	相对于根元素的行高。	font-size: 4rlh;
vh	相对于视口的高度。1vh = 1% 或视口高度的 1/100。	font-size: 4vh;
vw	相对于视口的宽度。1vw = 1% 或视口宽度的 1/100。	width: 4vw;
vmin	相对于视口较小的尺寸。1vmin = 1% 或视口较小尺寸的 1/100。	width: 4vmin;
vmax	相对于视口较大的尺寸。1vmax = 1% 或视口较大尺寸的 1/100。	width: 4vmax;
vb	相对于根元素块轴方向的初始包含块的大小。1vb = 包含块大小（块轴）的 1%。	font-size: 4vb;
vi	相对于根元素内联轴方向的初始包含块的大小。1vb = 包含块大小（内联轴）的 1%。	font-size: 4vi;
svw, svh	相对于较小视口的宽度和高度。1svw = 较小视口宽度的 1% 或 1/100，1svh = 较小视口高度的 1% 或 1/100。	width: 40svw; height: 40svh;
lvw, lvh	相对于较大视口的宽度和高度。1lvw = 较大视口宽度的 1% 或 1/100，1lvh = 较大视口高度的 1% 或 1/100。	width: 40lvw; height: 40lvh;
dvw, dvh	相对于动态视口的宽度和高度。1dvw = 动态视口宽度的 1% 或 1/100，1dvh = 动态视口高度的 1% 或 1/100。	width: 40dvw; height: 40dvh;

示例

这是一个使用相对单位 (em、rem、vw、vh、%) 的字体大小示例

<html>
<head>
    <style>
        .unit-em {
            font-size: 2em;
        }
        .unit-rem {
            font-size: 1.5rem;
        }
        .unit-vw {
            font-size: 5vw;
        }
        .unit-vh {
            font-size: 5vh;
        }
        .unit-percent {
            font-size: 150%;
        }
    </style>
</head>

<body>
    <h1 class="unit-em">Font size 2em </h1>
    <h1 class="unit-rem">Font size 1.5rem </h1>
    <h1 class="unit-vw">Font size 5vw </h1>
    <h1 class="unit-vh">Font size 5vh </h1>
    <h1 class="unit-percent">Font size 150% </h1>
</body>

</html>

单位 px（像素）和 em（表示相对于字体大小的尺寸）是长度的两个测量单位。要将 px 转换为 em，请尝试我们免费的 **CSS - PX 到 EM 转换器。**

打印页面