CSS - 单位

原创

admin 4个月前 (08-07) 阅读数 24 #CSS

CSS - 单位

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

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

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

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

长度单位

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

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

绝对长度单位

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

当浏览器对屏幕属性、使用的打印机或其他适当的用户代理有全面了解时，这些单位被证明是非常有效的。

以下表格包含了所有类型的绝对单位：

单位	描述	等效值	示例
mm	指毫米，用于以毫米为单位指定测量值。	1mm = 1/10厘米	font-size: 10mm;
cm	指厘米，用于以厘米为单位指定测量值。	1cm = 37.8px = 25.2/64英寸	font-size: 5cm;
Q	指四分之一毫米，用于以厘米为单位指定测量值。	1Q = 1/40厘米	font-size: 5Q;
in	指英寸，用于以英寸为单位指定测量值。	1in = 2.54cm = 96px	font-size: 1in;
pt	指点，用于以点为单位指定测量值。	1pt = 1/72英寸	font-size: 20pt;
pc	指派卡，用于以派卡为单位指定测量值。	1pc = 1/6英寸	width: 6pc;
px	指像素，用于以像素为单位指定测量值。	1px = 1/96英寸	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"> 字体大小 5mm </h1>
    <h1 class="unit-cm"> 字体大小 1cm </h1>
    <h1 class="unit-inch"> 字体大小 0.5英寸 </h1>
    <h1 class="unit-quarter"> 字体大小 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	相对于根元素行内轴方向的初始包含块大小。1vi = 包含块大小的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">字体大小 2em </h1>
    <h1 class="unit-rem">字体大小 1.5rem </h1>
    <h1 class="unit-vw">字体大小 5vw </h1>
    <h1 class="unit-vh">字体大小 5vh </h1>
    <h1 class="unit-percent">字体大小 150% </h1>
</body>

</html>