<length>

<length> CSS 数据类型表示距离值。长度可以在许多 CSS 属性中使用，例如 width、height、margin、padding、border-width、font-size 和 text-shadow。

注意：尽管 <percentage> 值可以在某些接受 <length> 值的相同属性中使用，但它们本身并非 <length> 值。请参阅 <length-percentage>。

语法

<length> 数据类型由一个 <number> 后跟下面列出的一个单位组成。与所有 CSS 维度一样，数字和单位字面量之间没有空格。如果数字为 0，则指定长度单位是可选的。

注意：某些属性允许负 <length> 值，而另一些则不允许。

长度的指定值（指定长度）由其数量和单位表示。长度的计算值（计算长度）是解析为绝对长度的指定长度，并且其单位没有区分。

<length> 单位可以是相对的也可以是绝对的。相对长度表示相对于某个其他距离的测量。根据单位的不同，此距离可以是特定字符的大小、行高或视窗的大小。使用相对长度单位的样式表可以更容易地从一个输出环境缩放到另一个输出环境。

注意：子元素不会继承为其父元素指定的相对值；它们继承计算值。

相对长度单位

CSS 相对长度单位基于字体、容器或视窗大小。

基于字体的相对长度单位

字体长度根据元素或其父元素当前生效的字体的特定字符或字体属性的大小定义 <length> 值。

注意：这些单位，尤其是 em 和根相对的 rem，通常用于创建可伸缩布局，即使用户更改了字体大小，这些布局也能保持页面的垂直节奏。

cap: 表示元素的 font 的“大写高度”（大写字母的标称高度）。
ch: 表示字形 0（零，Unicode 字符 U+0030）在元素的 font 中的宽度，更准确地说，是其前进度量。在无法或不切实际地确定 0 字形度量的情况下，必须假设其宽度为 0.5em，高度为 1em。
em: 表示元素的计算 font-size。如果在 font-size 属性本身使用，则表示元素的继承字体大小。
ex: 表示元素的 x 高度。在包含字母 x 的字体中，这通常是字体中所有小写字母的高度；在许多字体中，1ex ≈ 0.5em。
ic: 等于用于渲染“水”字形（CJK 水字形，U+6C34）的字体的前进度量。
lh: 等于使用该单位的元素的 line-height 属性的计算值，转换为绝对长度。该单位能够基于理想的空行理论大小进行长度计算。但是，实际行框的大小可能会根据其内容而有所不同。

基于根元素字体的相对长度单位

根元素字体相对长度单位根据根元素的特定字符或字体属性的大小定义 <length> 值。

rcap: 等于根元素的 font 的“大写字母高度”（大写字母的标称高度）。
rch: 等于字形 0（零，Unicode 字符 U+0030）在根元素的 font 中的宽度或前进度量。
rem: 表示根元素的 font-size（通常为 <html>）。在根元素的 font-size 中使用时，它表示其初始值。常见的浏览器默认值为 16px，但用户定义的偏好可能会修改此值。
rex: 表示根元素的 font 的 x 高度。
ric: 等于根元素字体上的 ic 单位的值。
rlh: 等于根元素字体上的 lh 单位的值。该单位能够基于理想的空行理论大小进行长度计算。但是，实际行框的大小可能会根据其内容而有所不同。

基于视窗的相对长度单位

视窗百分比长度单位基于四种不同的视窗大小：小、大、动态和默认。允许使用不同的视窗大小是为了应对浏览器界面动态扩展和收缩以及隐藏和显示其下方的内容的情况。

小

当您希望在浏览器界面动态扩展时获得尽可能小的视窗时，应使用小型视窗大小。小型视窗大小允许您设计的内容在浏览器界面扩展时填充整个视窗。选择此大小可能会在浏览器界面收缩时留出空闲空间。

例如，如果使用基于小型视窗大小的视窗百分比单位对元素进行大小调整，则该元素将在所有动态浏览器界面显示时完美填充屏幕，而不会隐藏其任何内容。但是，当这些浏览器界面隐藏时，元素周围可能会有额外的空间可见。因此，小型视窗百分比单位在一般情况下更“安全”，但在用户开始与页面交互后可能不会产生最吸引人的布局。

小型视窗大小用 sv 前缀表示，并产生 sv* 视窗百分比长度单位。小型视窗百分比单位的大小是固定的，因此是稳定的，除非视窗本身调整大小。

大

当您希望在浏览器界面动态收缩时获得尽可能大的视窗时，应使用大型视窗大小。大型视窗大小允许您设计的内容在浏览器界面收缩时填充整个视窗。您需要注意，当浏览器界面扩展时，内容可能会被隐藏。

例如，在屏幕空间十分宝贵的移动电话上，浏览器通常在用户开始滚动页面后隐藏标题栏和地址栏的全部或部分内容。当使用基于大型视窗大小的视窗百分比单位对元素进行大小调整时，元素的内容在这些浏览器界面隐藏时会填充整个可见页面。但是，当这些可收缩的浏览器界面显示时，它们可能会隐藏使用大型视窗百分比单位进行大小调整或定位的内容。

大型视窗单位用 lv 前缀表示，并产生 lv* 视窗百分比长度单位。大型视窗百分比单位的大小是固定的，因此是稳定的，除非视窗本身调整大小。

动态

当您希望视窗能够自动调整大小以响应浏览器界面动态扩展或收缩时，可以使用动态视窗大小。动态视窗大小允许您设计的内容精确地适应视窗，而与动态浏览器界面的存在无关。

动态视窗单位用 dv 前缀表示，并产生 dv* 视窗百分比长度单位。动态视窗百分比单位的大小是不稳定的，即使视窗本身没有改变也是如此。

注意：虽然动态视窗大小可以为您提供更多控制和灵活性，但使用基于动态视窗大小的视窗百分比单位会导致内容在用户滚动页面时调整大小。这会导致用户界面退化并造成性能损失。

默认

默认视窗大小由浏览器定义。生成的视窗百分比单位的行为可能等同于基于小型视窗大小的视窗百分比单位、基于大型视窗大小的视窗百分比单位、两者之间的中间大小或动态视窗百分比单位。

注意：例如，浏览器可能会实现与大型视窗百分比高度单位 (lvh) 等效的高度 (vh) 默认视窗百分比单位。如果是这样，这可能会在浏览器界面扩展时遮挡全页显示的内容。

视窗百分比长度以百分比的形式定义 <length> 值，相对于初始包含块的大小，而包含块又基于视窗的大小或页面区域（即文档的可见部分）的大小。当初始包含块的高度或宽度改变时，基于其大小的元素将相应地缩放。每个视窗大小都有一个与之对应的视窗百分比长度单位变体，如下所述。

注意：视窗长度在 @page 声明块中无效。

vh

表示视窗初始包含块高度的百分比。1vh 是视窗高度的 1%。例如，如果视窗高度为 300px，则属性上的 70vh 值将为 210px。

小型、大型和动态视窗大小的相应视窗百分比单位分别为 svh、lvh 和 dvh。vh 表示基于浏览器默认视窗大小的视窗百分比长度单位。

vw

表示视窗初始包含块宽度的百分比。1vw 是视窗宽度的 1%。例如，如果视窗宽度为 800px，则属性上的 50vw 值将为 400px。

对于小型、大型和动态视窗大小，相应的视窗百分比单位分别为 svw、lvw 和 dvw。vw 表示基于浏览器默认视窗大小的视窗百分比长度单位。

vmax

表示 vw 和 vh 中较大的值的百分比。

对于小型、大型和动态视窗大小，相应的视窗百分比单位分别为 svmax、lvmax 和 dvmax。vmax 表示基于浏览器默认视窗大小的视窗百分比长度单位。

vmin

表示 vw 和 vh 中较小的值的百分比。

对于小型、大型和动态视窗大小，相应的视窗百分比单位分别为 svmin、lvmin 和 dvmin。vmin 表示基于浏览器默认视窗大小的视窗百分比长度单位。

vb

表示初始包含块大小的百分比，方向为根元素的块轴。

对于小型、大型和动态视窗大小，相应的视窗百分比单位分别为 svb、lvb 和 dvb。vb 表示基于浏览器默认视窗大小的视窗百分比长度单位。

vi

表示初始包含块大小的百分比，方向为根元素的内联轴。

对于小型、大型和动态视窗大小，相应的视窗百分比单位分别为 svi、lvi 和 dvi。vi 表示基于浏览器默认视窗大小的视窗百分比长度单位。

容器查询长度单位

在使用容器查询对容器应用样式时，可以使用容器查询长度单位。这些单位指定相对于查询容器尺寸的长度。使用相对于其容器的长度单位的组件在不同的容器中使用起来更加灵活，无需重新计算具体的长度值。有关更多信息，请参阅容器查询。

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。

绝对长度单位

当输出介质的物理属性已知时，绝对长度单位表示物理测量值，例如用于打印布局。这是通过将其中一个单位锚定到一个物理单位，然后相对于该单位定义其他单位来实现的。低分辨率设备（如屏幕）和高分辨率设备（如打印机）的锚定方式不同。

对于低 dpi 设备，单位 px 表示物理参考像素；其他单位相对于它定义。因此，1in 定义为 96px，等于 72pt。此定义的结果是在此类设备上，以英寸 (in)、厘米 (cm) 或毫米 (mm) 描述的尺寸不一定与名称相同的物理单位的大小匹配。

对于高 dpi 设备，英寸 (in)、厘米 (cm) 和毫米 (mm) 与它们的物理对应物相同。因此，px 单位相对于它们定义 (1in 的 1/96)。

注意：许多用户会增加其用户代理的默认字体大小，以使文本更易读。绝对长度可能会导致可访问性问题，因为它们是固定的，不会根据用户设置进行缩放。因此，在设置 font-size 时，建议使用相对长度（例如 em 或 rem）。

px: 一个像素。对于屏幕显示，它传统上表示一个设备像素（点）。但是，对于打印机和高分辨率屏幕，一个 CSS 像素意味着多个设备像素。1px = 1in / 96。
cm: 一厘米。1cm = 96px / 2.54。
mm: 一毫米。1mm = 1cm / 10。
Q: 四分之一毫米。1Q = 1cm / 40。
in: 一英寸。1in = 2.54cm = 96px。
pc: 一皮卡。1pc = 12pt = 1in / 6。
pt: 一点。1pt = 1in / 72。

HTML

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

css

html {
  font-family: sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 50px;
  background-color: #eee;
  position: relative;
}

.inner {
  height: 50px;
  background-color: #999;
  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 # 长度

浏览器兼容性

BCD 表格仅在浏览器中加载