<length>
Baseline 广泛可用 *
<length> CSS 数据类型表示一个距离值。长度可用于许多 CSS 属性，例如 width、height、margin、padding、border-width、font-size 和 text-shadow。
备注： 虽然 <percentage> 值可用于某些接受 <length> 值的属性，但它们本身并不是 <length> 值。参见 <length-percentage>。
语法
<length> 数据类型由一个 <number> 后跟一个下面列出的单位组成。与所有 CSS 维度一样，数字和单位字面量之间没有空格。如果数字是 0，则指定长度单位是可选的。
备注： 有些属性允许负的 <length> 值，而有些则不允许。
长度的指定值（specified length）由其数量和单位表示。长度的计算值（computed length）是解析为绝对长度的指定长度，其单位不作区分。
<length> 单位可以是相对的或绝对的。相对长度表示相对于其他某个距离的度量。根据单位的不同，这个距离可以是特定字符的大小、行高，或者是视口的大小。使用相对长度单位的样式表可以更容易地从一个输出环境扩展到另一个输出环境。
备注： 子元素不会继承为其父元素指定的相对值；它们继承的是计算值。
相对长度单位
CSS 相对长度单位基于字体、容器或视口大小。
基于字体的相对长度单位
字体长度单位根据元素或其父元素当前生效字体中特定字符的大小或字体属性来定义 <length> 值。
备注： 这些单位，尤其是 em 和根相对单位 rem，常用于创建可伸缩的布局，即使用户更改字体大小，也能保持页面的垂直节奏。
cap-
表示元素
font的“大写字母高度”（大写字母的标称高度）。 ch-
表示元素
font中字形0（零，Unicode 字符 U+0030）的宽度，或更准确地说是前进量。在无法或不方便确定0字形度量的情况下，必须假定其宽度为0.5em，高度为1em。 emex-
表示元素
font的 x-height。在带有x字母的字体中，这通常是字体中小写字母的高度；在许多字体中1ex ≈ 0.5em。 ic-
等于用于渲染“水”字形（CJK 水表意文字，U+6C34）的字体中该字形的前进量。
lh-
等于使用它的元素的
line-height属性的计算值，并转换为绝对长度。该单位允许基于理想空行的理论尺寸进行长度计算。然而，实际行框的大小可能因其内容而异。
基于根元素字体的相对长度单位
根元素字体相对长度单位根据根元素中特定字符的大小或字体属性来定义 <length> 值。
基于视口的相对长度单位
视口百分比长度单位基于四种不同的视口尺寸：小、大、动态和默认。允许使用不同视口尺寸是为了应对浏览器界面动态展开和收起，以及显示和隐藏下方内容的情况。
- 小视口单位
-
当希望在浏览器界面动态扩展时获得尽可能小的视口，应使用小视口尺寸。小视口尺寸允许设计的内容在浏览器界面展开时填满整个视口。当浏览器界面收起时，选择此尺寸也可能留下空白区域。
例如，一个使用基于小视口尺寸的视口百分比单位来确定大小的元素，当所有动态浏览器界面都显示时，它将完美地填满屏幕，内容不会被遮挡。然而，当这些浏览器界面被隐藏时，元素周围可能会出现额外的空间。因此，小视口百分比单位通常更“安全”，但在用户开始与页面交互后，可能不会产生最吸引人的布局。
小视口尺寸由
sv前缀表示，并产生sv*视口百分比长度单位。小视口百分比单位的尺寸是固定的，因此是稳定的，除非视口本身被调整大小。 - 大视口单位
-
当希望在浏览器界面动态收起时获得尽可能大的视口，应使用大视口尺寸。大视口尺寸允许设计的内容在浏览器界面收起时填满整个视口。需要注意的是，当浏览器界面展开时，内容可能会被隐藏。
例如，在屏幕空间宝贵的手机上，浏览器通常会在用户开始滚动页面后隐藏部分或全部的标题栏和地址栏。当一个元素使用基于大视口尺寸的视口百分比单位来确定大小时，当这些浏览器界面被隐藏时，元素的内容将填满整个可见页面。然而，当这些可伸缩的浏览器界面显示时，它们可能会隐藏使用大视口百分比单位来确定大小或定位的内容。
大视口单位由
lv前缀表示，并产生lv*视口百分比单位。大视口百分比单位的尺寸是固定的，因此是稳定的，除非视口本身被调整大小。 - 动态视口单位
-
当希望视口根据浏览器界面动态展开或收起而自动调整大小时，可以使用动态视口尺寸。动态视口尺寸允许设计的内容精确地适应视口，而不管动态浏览器界面是否存在。
动态视口单位由
dv前缀表示，并产生dv*视口百分比单位。动态视口百分比单位的尺寸是不稳定的，即使视口本身没有改变。备注： 虽然动态视口尺寸可以提供更多的控制和灵活性，但使用基于动态视口的视口百分比单位可能会导致内容在用户滚动页面时重新调整大小。这可能导致用户界面降级并造成性能问题。
- 默认视口单位
-
默认视口尺寸由浏览器定义。由此产生的视口百分比单位的行为可能等同于基于小视口尺寸、大视口尺寸、介于两者之间的中间尺寸或动态视口尺寸的视口百分比单位。
备注： 例如，浏览器可能会将高度的默认视口百分比单位（
vh）实现为等同于大视口百分比高度单位（lvh）。如果是这样，当浏览器界面展开时，这可能会遮挡全屏显示的内容。目前，所有默认视口单位（vh、vw等）都等同于其对应的大视口单位（lvh、lvw等）。
视口百分比长度单位定义了相对于初始包含块尺寸的百分比 <length> 值，而初始包含块的尺寸又基于视口或页面区域（即可见文档部分）的大小。当初始包含块的高度或宽度改变时，基于它们大小的元素也会相应缩放。如下所述，每个视口尺寸都有一个对应的视口百分比长度单位变体。
备注： 视口长度单位在 @page 声明块中无效。
vh-
表示视口初始包含块高度的百分比。
1vh是视口高度的 1%。例如，如果视口高度是300px，那么属性值为70vh将是210px。针对小、大和动态视口尺寸的相应视口百分比单位分别是
svh、lvh和dvh。vh等同于lvh，表示基于大视口尺寸的视口百分比长度单位。 vw-
表示视口初始包含块宽度的百分比。
1vw是视口宽度的 1%。例如，如果视口宽度是800px，那么属性值为50vw将是400px。针对小、大和动态视口尺寸，相应的视口百分比单位是
svw、lvw和dvw。vw等同于lvw，表示基于大视口尺寸的视口百分比长度单位。 vmax-
以百分比表示
vw和vh中的较大值。针对小、大和动态视口尺寸，相应的视口百分比单位是
svmax、lvmax和dvmax。vmax等同于lvmax，表示基于大视口尺寸的视口百分比长度单位。 vmin-
以百分比表示
vw和vh中的较小值。针对小、大和动态视口尺寸，相应的视口百分比单位是
svmin、lvmin和dvmin。vmin等同于lvmin，表示基于大视口尺寸的视口百分比长度单位。 vb-
针对小、大和动态视口尺寸，相应的视口百分比单位分别是
svb、lvb和dvb。vb等同于lvb，表示基于大视口尺寸的视口百分比长度单位。 vi-
针对小、大和动态视口尺寸，相应的视口百分比单位是
svi、lvi和dvi。vi等同于lvi，表示基于大视口尺寸的视口百分比长度单位。
容器查询长度单位
当使用容器查询为容器应用样式时，可以使用容器查询长度单位。这些单位指定一个相对于查询容器尺寸的长度。使用相对于其容器的长度单位的组件在不同容器中使用时更加灵活，无需重新计算具体的长度值。
如果没有可用的合格容器进行查询，容器查询长度单位将默认为该轴向的小视口单位（sv*）。
更多信息，请参阅容器查询。
cqw-
表示查询容器宽度的百分比。
1cqw是查询容器宽度的 1%。例如，如果查询容器的宽度是800px，那么属性值为50cqw将是400px。 cqh-
表示查询容器高度的百分比。
1cqh是查询容器高度的 1%。例如，如果查询容器的高度是300px，那么属性值为10cqh将是30px。 cqi-
表示查询容器行内尺寸的百分比。
1cqi是查询容器行内尺寸的 1%。例如，如果查询容器的行内尺寸是800px，那么属性值为50cqi将是400px。 cqb-
表示查询容器块级尺寸的百分比。
1cqb是查询容器块级尺寸的 1%。例如，如果查询容器的块级尺寸是300px，那么属性值为10cqb将是30px。 cqmin-
表示查询容器行内尺寸或块级尺寸中较小值的百分比。
1cqmin是查询容器行内尺寸或块级尺寸中较小值的 1%。例如，如果查询容器的行内尺寸是800px，块级尺寸是300px，那么属性值为50cqmin将是150px。 cqmax-
表示查询容器行内尺寸或块级尺寸中较大值的百分比。
1cqmax是查询容器行内尺寸或块级尺寸中较大值的 1%。例如，如果查询容器的行内尺寸是800px，块级尺寸是300px，那么属性值为50cqmax将是400px。
绝对长度单位
当输出介质的物理属性已知时（例如打印布局），绝对长度单位表示一个物理测量值。这是通过将其中一个单位锚定到一个物理单位或视角单位，然后定义其他单位相对于它来实现的。物理单位包括 cm、in、mm、pc、pt、px 和 Q。对于低分辨率设备（如屏幕）和高分辨率设备（如打印机），锚定的方式不同。
对于低 dpi 设备，单位 px 表示物理上的参考像素；其他单位是相对于它定义的。因此，1in 定义为 96px，这等于 72pt。这个定义的结果是，在这类设备上，用英寸（in）、厘米（cm）或毫米（mm）描述的尺寸不一定与同名的物理单位的尺寸相匹配。
对于高 dpi 设备，英寸（in）、厘米（cm）和毫米（mm）与其物理对应物相同。因此，px 单位是相对于它们定义的（1in 的 1/96）。
备注： 许多用户会增加其用户代理的默认字体大小，以使文本更易读。绝对长度单位可能会导致无障碍问题，因为它们是固定的，不会根据用户设置进行缩放。因此，在设置 font-size 时，应优先使用相对长度（如 em 或 rem）。
插值
在进行动画时，<length> 数据类型的值会作为真实的浮点数进行插值。插值发生在计算值上。插值的速度由与动画关联的缓动函数决定。
示例
比较不同的长度单位
以下示例提供了一个输入框，你可以在其中输入一个 <length> 值（例如 300px、50%、30vw），以设置按下 Enter 或 Return 键后下方出现的结果条的宽度。
这可以让你比较和对比不同长度单位的效果。
HTML
<div class="outer">
<div class="input-container">
<label for="length">Enter width:</label>
<input type="text" id="length" />
</div>
<div class="inner"></div>
</div>
<div class="results"></div>
CSS
html {
font-family: sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.outer {
width: 100%;
height: 50px;
background-color: #eeeeee;
position: relative;
}
.inner {
height: 50px;
background-color: #999999;
box-shadow:
inset 3px 3px 5px rgb(255 255 255 / 50%),
inset -3px -3px 5px rgb(0 0 0 / 50%);
}
.result {
height: 20px;
box-shadow:
inset 3px 3px 5px rgb(255 255 255 / 50%),
inset -3px -3px 5px rgb(0 0 0 / 50%);
background-color: orange;
display: flex;
align-items: center;
margin-top: 10px;
}
.result code {
position: absolute;
margin-left: 20px;
}
.results {
margin-top: 10px;
}
.input-container {
position: absolute;
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
}
label {
margin: 0 10px 0 20px;
}
JavaScript
const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");
inputElem.addEventListener("change", () => {
inputDiv.style.width = inputElem.value;
const result = document.createElement("div");
result.className = "result";
result.style.width = inputElem.value;
const code = document.createElement("code");
code.textContent = `width: ${inputElem.value}`;
result.appendChild(code);
resultsDiv.appendChild(result);
inputElem.value = "";
inputElem.focus();
});
结果
规范
| 规范 |
|---|
| CSS 值和单位模块第 4 级 # 长度 |
浏览器兼容性
加载中…