path: root/files/zh-cn/web/css/length/index.html

---
title: <length>
slug: Web/CSS/length
tags:
  - CSS
  - Web
  - 参考
  - 层叠样式表
  - 布局
  - 长度
translation_of: Web/CSS/length
---
<div>{{CSSRef}}</div>

<p>长度 <code><strong>&lt;length&gt;</strong></code> 是用于表示距离尺寸的 <a href="/zh-CN/docs/Web/CSS">CSS</a> <a href="/zh-CN/docs/Web/CSS/CSS_Types">数据类型</a>。许多 CSS 属性会用到长度，比如 {{Cssxref("width")}}、{{Cssxref("margin")}}、{{Cssxref("padding")}}、{{Cssxref("font-size")}}、{{Cssxref("border-width")}} 和 {{Cssxref("text-shadow")}}。</p>

<div class="blockIndicator note">
<p><strong>注意：</strong>虽然 {{cssxref("&lt;percentage&gt;")}} 值也是 CSS 维度，并且可以在接受 <code>&lt;length&gt;</code> 值的某些相同属性中使用，但它们本身不是 <code>&lt;length&gt;</code> 值。具体请参阅{{cssxref("&lt;length-percentage&gt;")}}。</p>
</div>

<h2 id="语法">语法</h2>

<p><code>&lt;length&gt;</code> 数据类型由一个 {{cssxref("&lt;number&gt;")}} 和一个长度单位构成。 与所有 CSS 维度一样，单位的字面值与数字之间没有空格。 数字为 <code>0</code> 时，长度单位是可选的。</p>

<blockquote>
<p>有些属性支持使用负数的长度值, 而有些不支持</p>
</blockquote>

<h3 id="单位">单位</h3>

<h4 id="相对长度单位">相对长度单位</h4>

<p>相对长度代表着以其它距离为单位的一种尺寸。这个单位可以是指定字符的大小，<a href="/zh-CN/docs/Web/CSS/line-height">行高</a>，或者是 {{glossary("viewport")}} 的大小。</p>

<h5 id="字体相对长度">字体相对长度</h5>

<p>字体的相对长度指的是根据一个特定字符的大小或当前字符所在元素的父元素所定义的字符大小来定义长度值。</p>

<div class="note">
<p><strong>注意:</strong> 这些相对单位, 尤其是 em 和 rem, 经常被用于满足即使用户更改字体大小，也可以保持页面的垂直阅读节奏可拓展布局中</p>
</div>

<dl>
 <dt><code><a id="cap" name="cap">cap</a></code> {{experimental_inline}}</dt>
 <dd>表示元素字体 {{Cssxref("font")}} 的“上限高度”（cap height，大写字母的标称高度（nominal height））。</dd>
 <dt><code><a name="ch">ch</a></code></dt>
 <dd>
 <p>这一单位代表元素所用字体 {{Cssxref("font")}} 中“0”这一字形的宽度（"0"，Unicode字符U+0030），更准确地说，是“0”这一字形的预测尺寸（advance measure）。</p>

 <p>如果无法确定“ 0”字形的大小，则必须假定其宽为 <code>0.5em</code>，高为 <code>1em</code>。</p>
 </dd>
 <dt><code><a name="em">em</a></code></dt>
 <dd>相对长度单位，这个单位表示元素的 {{Cssxref("font-size")}} 的计算值。如果用在{{ Cssxref("font-size") }} 属性本身，它则表示元素<em>继承</em>的 <code>font-size</code> 值。</dd>
 <dt><code><a name="ex">ex</a></code></dt>
 <dd>这个单位表示元素{{Cssxref("font")}}的 <a href="http://en.wikipedia.org/wiki/X-height">x-height</a> 。在含有“X”字母的字体中，它是该字体的小写字母的高度；对于很多字体来说，<code>1ex ≈ 0.5em</code>。</dd>
 <dt><code><a id="ic" name="ic">ic</a></code> {{experimental_inline}}</dt>
 <dd>等于在用于渲染的字体中找到的“水”（CJK 表意文字 "水"，U + 6C34）字形的使用预先测量（used advance measure）。</dd>
 <dt><code><a id="lh" name="lh">lh</a></code> {{experimental_inline}}</dt>
 <dd>等于使用它的元素的 {{Cssxref("line-height")}} 属性的计算值，转换为绝对长度。</dd>
 <dt><code><a name="rem">rem</a></code></dt>
 <dd>这个单位代表根元素（通常为{{HTMLElement("html")}} 元素）的 {{Cssxref("font-size")}} 大小。当用在根元素的 {{Cssxref("font-size")}} 上面时 ，它代表了它的初始值。</dd>
 <dt><code>rlh</code> {{experimental_inline}}</dt>
 <dd>等于根元素行高 {{Cssxref("line-height")}} 的计算值。当用于设置根元素的行高 {{Cssxref("line-height")}} 或是字体大小 {{Cssxref("font-size")}} 时，该rlh指的是根元素行高 {{Cssxref("line-height")}} 或字体大小 {{Cssxref("font-size")}} 的初始值。</dd>
</dl>

<h5 id="视口Viewport比例的长度">视口(Viewport)比例的长度</h5>

<p>视口百分比长度定义相对于 {{glossary("viewport")}} 的大小的 <code>&lt;length&gt;</code> 值，即文档的可见部分。视口长度在 {{cssxref("@page")}} 声明块中无效。</p>

<dl>
 <dt><code><a name="vh">vh</a></code></dt>
 <dd>视口的初始<a href="/zh-CN/docs/Web/CSS/All_About_The_Containing_Block">包含块</a>的高度的 1%。</dd>
 <dt><code><a name="vh">vw</a></code></dt>
 <dd>视口的初始<a href="/zh-CN/docs/Web/CSS/All_About_The_Containing_Block">包含块</a>的宽度的 1%。</dd>
 <dt id="vi"><code>vi</code>{{experimental_inline}}</dt>
 <dd>等于初始<a href="/zh-CN/docs/Web/CSS/All_About_The_Containing_Block">包含块</a>大小的 1%，在根元素的<a href="/zh-CN/docs/Web/CSS/CSS_Logical_Properties#inline-dimension">行内轴</a>方向上。</dd>
 <dt id="vb"><code>vb</code>{{experimental_inline}}</dt>
 <dd>等于初始<a href="/zh-CN/docs/Web/CSS/All_About_The_Containing_Block">包含块</a>大小的 1%，在根元素的<a href="/zh-CN/docs/Web/CSS/CSS_Logical_Properties#block-dimension">区块轴</a>方向上。</dd>
 <dt><code><a name="vmin">vmin</a></code></dt>
 <dd>视口高度 <code>vw</code> 和宽度 <code>vh</code> 两者之间的最小值。</dd>
 <dt><code><a name="vmax">vmax</a></code></dt>
 <dd>视口高度 <code>vw</code> 和宽度 <code>vh</code> 两者之间的最大值。</dd>
</dl>

<h4 id="绝对长度单位">绝对长度单位</h4>

<p>当输出介质的物理性质已知时，如用于打印布局，绝对长度单位代表一个物理度量单位。这是通过：将一个单元锚定到一个物理单元，并将其定义为相对于它的另一个，来实现的。对于低分辨率的设备（如屏幕），高分辨率设备（如打印机），该锚定是不同的。</p>

<p>对于低 dpi 设备，单位 px 表示物理参考像素;其他单位是相对于它定义的。因此，1 in 定义为 96px，等于 72pt。此定义的后果是，在此类设备上，以英寸（in）、厘米（cm）或 毫米（mm）表示的尺寸不需要与同名的物理单位的大小相匹配。<br>
 <br>
 对于高 dpi 设备，英寸（in）、厘米（cm）和毫米（mm）与物理设备相同。因此，px 单位是相对于它们定义的 （1/96 of 1 inch）。</p>

<div class="note">
<p><strong>注意：</strong>很多用户选择增加用户代理 {{glossary("user agent")}} 的字体大小以提高文本可读性。因为绝对长度是固定值, 无法根据用户的设置进行缩放, 因此会降低页面友好性，因此在设置字体大小 <code>font-size</code> 相关的长度值时，最好优先选择使用相对长度单位，比如 <code>em</code> 或 <code>rem</code>。</p>

<p><strong>译者注：</strong>一些浏览器还支持设置最低字体大小。常见的最低字体大小限制为 9px 到 12px，</p>
</div>

<dl>
 <dt><code><a name="px">px</a></code></dt>
 <dd>一像素（pixel）。对于普通的屏幕，通常是一个设备像素（点）。<br>
 对于<em>打印机</em>和<em>高分辨率屏幕</em>，一个 CSS 像素往往占多个设备像素。一般来说，每英寸的像素的数量保持在 96 左右， <code>1px</code> = <code>1in</code> 的 96 分之一。</dd>
 <dt><code><a name="cm">cm</a></code></dt>
 <dd>一厘米。 <code>1cm = 96px / 2.54</code>。</dd>
 <dt><code><a name="mm">mm</a></code></dt>
 <dd>一毫米。 <code>1mm = 1/10 * 1cm</code>。</dd>
 <dt><code><a id="q" name="q">Q</a></code> {{experimental_inline}}</dt>
 <dd>四分之一毫米。<code>1Q = 1/40 * 1cm</code>。</dd>
 <dt><code><a name="in">in</a></code></dt>
 <dd>一英寸。<code>1in = 2.54cm = 96px</code>。</dd>
 <dt><code><a name="pc">pc</a></code></dt>
 <dd>一<u>十二点活字</u>（pica），六分之一英寸。 <code>1pc = 12pt = 1/6 * 1in</code>。</dd>
 <dt><code><a id="pt" name="pt">pt</a></code></dt>
 <dd>一磅（point），72 分之一英寸。<code>1pt = 1/12 * 1pc = 1/72 * 1in</code>。</dd>
 <dt><code><a name="mozmm">mozmm</a></code> {{non-standard_inline}}, 在 Firefox 59 中被移除</dt>
 <dd>一个实验单位，无论显示器的尺寸或分辨率如何，都会尝试在一毫米处进行渲染。很少会用到，但可能在移动设备上特别有用。</dd>
</dl>

<h2 id="插值">插值</h2>

<p>当包含动画效果时，动画中<code>&lt;length&gt;</code>的值是由计算出的值使用插值法得出的浮点实数。插值的速度由动画的<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/easing-function">定时函数</a>决定。</p>

<h2 id="示例">示例</h2>

<h3 id="长度单位的比较">长度单位的比较</h3>

<p>下面的示例为你提供了一个输入框，在框中输入一个<code>&lt;length&gt;</code>值（比如：<code>300px</code>, <code>50%</code>, <code>30vw</code>），按下<kbd>Return</kbd>，一个由你设置宽度的结果条将出现在下方。</p>

<p>这允许你对比不同长度单位的效果。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="outer"&gt;
  &lt;div class="input-container"&gt;
    &lt;label&gt;Enter width:&lt;/label&gt;
    &lt;input type="text" id="length"&gt;
  &lt;/div&gt;
  &lt;div class="inner"&gt;

  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="results"&gt;
&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">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 rgba(255,255,255,0.5),
              inset -3px -3px 5px rgba(0,0,0,0.5);
}

.result {
  height: 20px;
  background-color: #999;
  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
              inset -3px -3px 5px rgba(0,0,0,0.5);
  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;
}</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js notranslate">const inputDiv = document.querySelector('.inner');
const inputElem = document.querySelector('input');
const resultsDiv = document.querySelector('.results');

inputElem.addEventListener('change', () =&gt; {
  inputDiv.style.width = inputElem.value;

  const result = document.createElement('div');
  result.className = 'result';
  result.style.width = inputElem.value;
  result.innerHTML = `&lt;code&gt;width: ${inputElem.value}&lt;/code&gt;`;
  resultsDiv.appendChild(result);

  inputElem.value = '';
  inputElem.focus();
})</pre>

<h4 id="Result">Result</h4>

<p>{{EmbedLiveSample('Length_unit_comparison','100%', 700)}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Values', '#lengths', '&lt;length&gt;')}}</td>
   <td>{{Spec2('CSS4 Values')}}</td>
   <td>Adds the <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, and <code>rlh</code> units.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}</td>
   <td>{{Spec2('CSS3 Values')}}</td>
   <td>Adds the <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, and <code>Q</code> units.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Explicit definition of the <code>em</code>, <code>pt</code>, <code>pc</code>, and <code>px</code> units.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Initial definition. Implicit definition of the <code>em</code>, <code>pt</code>, <code>pc</code>, and <code>px</code> units.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>

<p>{{Compat("css.types.length")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 属性值与单位教程</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Values_and_Units">CSS 属性值与单位参考</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Box_Model">框盒模型</a></li>
</ul>