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

---
title: CSS values and units
slug: Web/CSS/CSS_Values_and_Units
translation_of: Web/CSS/CSS_Values_and_Units
---
<div>{{CSSRef}}</div>

<p class="summary"><span class="seoSummary">所有的 CSS 声明都包括一个 属性 / 值 对。由于属性不同，对应的值可能是一个单个整数或关键字，也可能是一串包含或不包含计数单位的数字和关键字的集合。CSS 中属性接受一个共同的数据类型（属性的值和对应的单位）。</span> 下面是大多数这些数据类型的概览。想要获知每一种数据类型的更详细信息，请分别查看它们的链接。</p>

<h2 id="文本数据类型">文本数据类型</h2>

<ul>
 <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
 <li>作为 <code>&lt;ident&gt;</code> 预定义的关键字</li>
 <li>{{cssxref("&lt;string&gt;")}}</li>
 <li>{{cssxref("&lt;url&gt;")}}</li>
</ul>

<p>文本数据类型要么是 <code>&lt;string&gt;</code>，要么是一系列字符的合集，或者是 <code>&lt;ident&gt;</code> —— 一个实质上是不带引号的字符串的"CSS 标识符"。一个 <code>&lt;string&gt;</code> 必须被单引号或者双引号所包围。CSS 标识符，在标准中所列出的 <code>&lt;ident&gt;</code> 或者 <code>&lt;custom-ident&gt;</code> 则必须不带引号。</p>

<p>在 CSS 标准中，属性的值可以由 Web 开发者指定，例如关键帧动画（keyframe animations），字体的名称（font-family names），或者是被列为 {{cssxref("&lt;custom-ident&gt;")}} 和 / 或 {{cssxref("&lt;string&gt;")}} 的栅格区域（grid-areas）。</p>

<p>当允许使用带引号或者不带引号的两种用户定义的文本属性值时，标准列出为 <code>&lt;custom-ident&gt; | &lt;string&gt;</code>，也就是说引号是可选的。例如在指定动画的名称时：</p>

<pre class="brush: css notranslate">@keyframe validIdent {
  /* keyframes go here */
}
@keyframe 'validString' {
  /* keyframes go here */
}</pre>

<p>有些文本属性值不允许被引号包围。例如， {{cssxref("grid-area")}} 属性对应的值可以是<code>&lt;custom-ident&gt;</code>，所以假设有一个栅格区域名为 <code>content</code> ，我们必须不带引号地使用：</p>

<pre class="brush: css notranslate">.item {
  grid-area: content;
}
</pre>

<p>相比之下，另一种数据类型是 {{cssxref("&lt;string&gt;")}}，例如 {{cssxref("content")}} 属性的值则必须被引号包围：</p>

<pre class="brush: css notranslate">.item::after {
    content: "This is my content.";
}
</pre>

<p>大多数时候你可以随心所欲地创建任何名称作为标识符，甚至包括使用 emoji 表情。然而标识符不能是 <code>none</code>，<code>unset</code>，<code>initial</code>， 或者 <code>inherit</code>，以两条短横线开头。并且，你也不可以使用任何已经预定义的 CSS 关键字。查看 {{cssxref("&lt;custom-ident&gt;")}} 和 {{cssxref("&lt;string&gt;")}} 页面了解更多信息。</p>

<h3 id="预定义的关键值">预定义的关键值</h3>

<p>预定义的关键值是由 CSS 标准为属性定义的文本值。这些关键字也属于 CSS 标识符，因此在使用时无需用引号包围。</p>

<p>当在 CSS 标准或者 MDN 属性页面中查看某个 CSS 属性时，该属性所有允许的取值都会以下面表格的形式列出。下面的值是 {{cssxref("float")}} 属性可以取的预定义值：</p>

<pre class="syntaxbox notranslate">left <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> right <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> none <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-start <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-end</pre>

<p>这些值在使用时不需要引号：</p>

<pre class="brush: css notranslate"><code>.box {
    float: left;
}
</code></pre>

<h3 id="CSS_全局范围内的值">CSS 全局范围内的值</h3>

<p>预定义的关键值往往是针对某一个属性的。作为补充，所有 CSS 属性都可以接受 CSS 全局范围内的值：{{cssxref("initial")}}，{{cssxref("inherit")}} 和 {{cssxref("unset")}}。这些全局范围的值往往指定了一种默认的行为。</p>

<p><code>initial</code>指定了当前值作为属性的初始值。<code>inherit</code>关键字则指定当前元素的属性值基于父元素进行计算，即继承。</p>

<p><code>unset</code>关键字的作用是<code>inherit</code>或<code>initial</code>中的一者，取决于某个 CSS 属性是否可以自父元素继承。</p>

<p>{{cssxref("revert")}} 在 Cascade Level 4 标准中被引入，但这一属性值还没有较好的浏览器支持现状。</p>

<h3 id="URLs">URLs</h3>

<p>{{cssxref("&lt;url&gt;")}} 类型使用一个函数符号，接收一个<code>&lt;string&gt;</code>类型的URL。这个URL可以是绝对地址或者相对地址。例如，如果你想要设置一张背景图片，那么你可以采用如下两种做法：</p>

<pre class="brush: css notranslate"><code>.box {
  background-image: url("images/my-background.png");
}</code>

<code>.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}</code>
</pre>

<p><code>url()</code>的参数可以也可以不使用引号。如果使用引号包围了URL，那么它会被解析为一个<code>&lt;url-token&gt;</code>，包含对某些字符的额外转义。查看 {{cssxref("&lt;url&gt;")}} 以获取更多信息。</p>

<h2 id="数值数据类型">数值数据类型</h2>

<ul>
 <li>{{cssxref("&lt;integer&gt;")}}</li>
 <li>{{cssxref("&lt;number&gt;")}}</li>
 <li>{{cssxref("&lt;dimension&gt;")}}</li>
 <li>{{cssxref("&lt;percentage&gt;")}}</li>
</ul>

<h3 id="整数">整数</h3>

<p>一个整数包含 <code>0</code> 到 <code>9</code>的一个或多个十进制数字，例如 <code>1024</code> 或 <code>-55</code>。一个整数可能额外包含 <code>+</code> 或 <code>-</code> 前缀，在正负号和数值之间没有任何空格。</p>

<h3 id="数值">数值</h3>

<p>{{cssxref("&lt;number&gt;")}} 表示一个真正的数，有可能又或者没有小数点和小数部分。例如 <code>0.255</code>，<code>128</code> 或 <code>-1.2</code>。数值也可能包含前缀 <code>+</code> 或 <code>-</code> 标识正负。</p>

<h3 id="尺寸">尺寸</h3>

<p>{{cssxref("&lt;dimension&gt;")}} 是一个包含单位的 <code>&lt;number&gt;</code>，例如 <code>45deg</code>，<code>100ms</code>，或者 <code>10px</code>。单位是大小写敏感的，且数值和单位之间不允许有任何的空格或其他字符。例如 <code>1 cm</code> 不是一个合法的值。</p>

<p>CSS 使用尺寸来指定：</p>

<ul>
 <li>{{cssxref("&lt;length&gt;")}} （距离单位）</li>
 <li>{{cssxref("&lt;angle&gt;")}}</li>
 <li>{{cssxref("&lt;time&gt;")}}</li>
 <li>{{cssxref("&lt;frequency&gt;")}}</li>
 <li>{{cssxref("&lt;resolution&gt;")}}</li>
</ul>

<p>这些都将在下面的部分里一一介绍。</p>

<h4 id="距离单位">距离单位</h4>

<p>一个距离单位，或这也称为长度（length），允许作为属性的值。它被描述为 {{cssxref("&lt;length&gt;")}} 类型。CSS中有两种长度：相对和绝对。</p>

<p>相对长度单位基于其它元素的长度。例如 <code>em</code> 基于该元素的字号大小，<code>vh</code> 则与设备视口的高度有关。</p>

<table class="standard-table">
 <caption>
 <h4 id="相对长度单位">相对长度单位</h4>
 </caption>
 <thead>
  <tr>
   <th scope="col">单位</th>
   <th scope="col">基于...</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>em</code></td>
   <td>元素的字号</td>
  </tr>
  <tr>
   <td><code>ex</code></td>
   <td>字体的X字高（x-height）</td>
  </tr>
  <tr>
   <td><code>cap</code></td>
   <td>字体中大写字母的标称高度</td>
  </tr>
  <tr>
   <td><code>ch</code></td>
   <td>Average character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.</td>
  </tr>
  <tr>
   <td><code>ic</code></td>
   <td>Average character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.</td>
  </tr>
  <tr>
   <td><code>rem</code></td>
   <td>根元素的字体大小。</td>
  </tr>
  <tr>
   <td><code>lh</code></td>
   <td>元素的行高。</td>
  </tr>
  <tr>
   <td><code>rlh</code></td>
   <td>根元素的行高。</td>
  </tr>
  <tr>
   <td><code>vw</code></td>
   <td>1% of viewport's width.</td>
  </tr>
  <tr>
   <td><code>vh</code></td>
   <td>1% of viewport's height.</td>
  </tr>
  <tr>
   <td><code>vi</code></td>
   <td>1% of viewport's size in the root element's inline axis.</td>
  </tr>
  <tr>
   <td><code>vb</code></td>
   <td>1% of viewport's size in the root element's block axis.</td>
  </tr>
  <tr>
   <td><code>vmin</code></td>
   <td>1% of viewport's smaller dimension.</td>
  </tr>
  <tr>
   <td><code>vmax</code></td>
   <td>1% of viewport's larger dimension.</td>
  </tr>
 </tbody>
</table>

<p>Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, <code>mm</code> is a physical millimeter, 1/10th of a centimeter.</p>

<table class="standard-table">
 <caption>
 <h4 id="Absolute_length_units">Absolute length units</h4>
 </caption>
 <thead>
  <tr>
   <th scope="col">Unit</th>
   <th scope="col">Name</th>
   <th scope="col">Equivalent to</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>cm</code></td>
   <td>Centimeters</td>
   <td>1cm = 96px/2.54</td>
  </tr>
  <tr>
   <td><code>mm</code></td>
   <td>Millimeters</td>
   <td>1mm = 1/10th of 1cm</td>
  </tr>
  <tr>
   <td><code>Q</code></td>
   <td>Quarter-millimeters</td>
   <td>1Q = 1/40th of 1cm</td>
  </tr>
  <tr>
   <td><code>in</code></td>
   <td>Inches</td>
   <td>1in = 2.54cm = 96px</td>
  </tr>
  <tr>
   <td><code>pc</code></td>
   <td>Picas</td>
   <td>1pc = 1/16th of 1in</td>
  </tr>
  <tr>
   <td><code>pt</code></td>
   <td>Points</td>
   <td>1pt = 1/72th of 1in</td>
  </tr>
  <tr>
   <td><code>px</code></td>
   <td>Pixels</td>
   <td>1px = 1/96th of 1in</td>
  </tr>
 </tbody>
</table>

<p>When including a length value, if the length is <code>0</code>, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.</p>

<h4 id="Angle_units">Angle units</h4>

<p>Angle values are represented by the type {{cssxref("&lt;angle&gt;")}} and accept the following values:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Unit</th>
   <th scope="col">Name</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>deg</code></td>
   <td>Degrees</td>
   <td>There are 360 degrees in a full circle.</td>
  </tr>
  <tr>
   <td><code>grad</code></td>
   <td>Gradians</td>
   <td>There are 400 gradians in a full circle.</td>
  </tr>
  <tr>
   <td><code>rad</code></td>
   <td>Radians</td>
   <td>There are 2π radians in a full circle.</td>
  </tr>
  <tr>
   <td><code>turn</code></td>
   <td>Turns</td>
   <td>There is 1 turn in a full circle.</td>
  </tr>
 </tbody>
</table>

<h4 id="Time_units">Time units</h4>

<p>Time values are represented by the type {{cssxref("&lt;time&gt;")}}. When including a time value, the unit identifier -- the <code>s</code> or <code>ms</code> -- is required. It accepts the following values.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Unit</th>
   <th scope="col">Name</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>s</code></td>
   <td>Seconds</td>
   <td></td>
  </tr>
  <tr>
   <td><code>ms</code></td>
   <td>Milliseconds</td>
   <td>There are 1,000 milliseconds in a second.</td>
  </tr>
 </tbody>
</table>

<h4 id="Frequency_units">Frequency units</h4>

<p>Frequency values are represented by the type {{cssxref("&lt;frequency&gt;")}}. It accepts the following values.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Unit</th>
   <th scope="col">Name</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>Hz</code></td>
   <td>Hertz</td>
   <td>Represents the number of occurrences per second.</td>
  </tr>
  <tr>
   <td><code>kHz</code></td>
   <td>KiloHertz</td>
   <td>A kiloHertz is 1000 Hertz.</td>
  </tr>
 </tbody>
</table>

<p><code>1Hz</code>, which can also be written as <code>1hz</code> or <code>1HZ</code>, is one cycle per second.</p>

<h4 id="Resolution_unit">Resolution unit</h4>

<p>Resolution units are represented by the type {{cssxref("&lt;resolution&gt;")}}. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Unit</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>dpi</code></td>
   <td>Dots per inch.</td>
  </tr>
  <tr>
   <td><code>dpcm</code></td>
   <td>Dots per centimetre.</td>
  </tr>
  <tr>
   <td><code>dppx</code>, <code>x</code></td>
   <td>Dots per px unit.</td>
  </tr>
 </tbody>
</table>

<h3 id="Percentages">Percentages</h3>

<p>A {{cssxref("&lt;percentage&gt;")}} is a type that represents a fraction of some other value.</p>

<p>Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.</p>

<p>As an example, if you specify the {{cssxref("width")}} of a box as a percentage, it refers to the percentage of the box's parent's computed width:</p>

<pre class="brush: css notranslate">.box {
  width: 50%;
}</pre>

<h3 id="Mixing_percentages_and_dimensions">Mixing percentages and dimensions</h3>

<p>Some properties accept a dimension that could be either one of two types, for example a <code>&lt;length&gt;</code> <strong>or</strong> a <code>&lt;percentage&gt;</code>. In this case the allowed value is detailed in the specification as a combination unit, e.g. {{cssxref("&lt;length-percentage&gt;")}}. Other possible combinations are as follows:</p>

<ul>
 <li>{{cssxref("&lt;frequency-percentage&gt;")}}</li>
 <li>{{cssxref("&lt;angle-percentage&gt;")}}</li>
 <li>{{cssxref("&lt;time-percentage&gt;")}}</li>
</ul>

<h3 id="Special_data_types_defined_in_other_specs">Special data types (defined in other specs)</h3>

<ul>
 <li>{{cssxref("&lt;color&gt;")}}</li>
 <li>{{cssxref("&lt;image&gt;")}}</li>
 <li>{{cssxref("&lt;position&gt;")}}</li>
</ul>

<h4 id="Color">Color</h4>

<p>The {{cssxref("&lt;color&gt;")}} value specifies the color of an element feature (e.g. it's background color), and is defined in the <a href="https://drafts.csswg.org/css-color-3/">CSS Color Module</a>.</p>

<h4 id="Image">Image</h4>

<p>The {{cssxref("&lt;image&gt;")}} value specifies all the different types of image that can be used in CSS, and is defined in the <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module</a>.</p>

<h4 id="Position">Position</h4>

<p>The {{cssxref("&lt;position&gt;")}} type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a  {{cssxref("background-position")}} and therefore specified in the <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders specification</a>.</p>

<h3 id="Functional_notation">Functional notation</h3>

<ul>
 <li>{{cssxref("calc()")}}</li>
 <li>{{cssxref("min", "min()")}}</li>
 <li>{{cssxref("max", "max()")}}</li>
 <li>{{cssxref("clamp", "clamp()")}}</li>
 <li>{{cssxref("toggle", "toggle()")}}</li>
 <li>{{cssxref("attr", "attr()")}}</li>
</ul>

<p>Functional notation is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis <code>(</code> followed by the argument(s) to the notation followed by a right parenthesis <code>)</code>. Functions can take multiple arguments, which are formatted similarly to a CSS property value.</p>

<p>White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for <code>min()</code>, <code>max()</code> and <code>clamp()</code> functions.)</p>

<p>Some legacy functional notations such as <code>rgba()</code> use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.</p>

<h2 id="Specifications">Specifications</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")}}</td>
   <td>{{Spec2("CSS4 Values")}}</td>
   <td>Adds the <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code> and <code>rlh</code> units.<br>
    Adds the <code>min()</code>, <code>max()</code> and <code>clamp()</code> functional notation<br>
    Adds <code>toggle()</code></td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Values")}}</td>
   <td>{{Spec2("CSS3 Values")}}</td>
   <td>Adds <code>calc()</code>, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code></td>
  </tr>
  <tr>
   <td>{{SpecName("CSS4 Colors")}}</td>
   <td>{{Spec2("CSS4 Colors")}}</td>
   <td>Adds commaless syntaxes for the <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions. Allows alpha values in <code>rgb()</code> and <code>hsl()</code>, turning <code>rgba()</code> and <code>hsla()</code> into (deprecated) aliases for them.<br>
    Adds color keyword <code>rebeccapurple</code>.<br>
    Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.<br>
    Adds <code>hwb()</code>, <code>device-cmyk()</code>, and <code>color()</code> functions.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Colors")}}</td>
   <td>{{Spec2("CSS3 Colors")}}</td>
   <td>Deprecates system-colors. Adds SVG colors. Adds the <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS4 Images")}}</td>
   <td>{{Spec2("CSS4 Images")}}</td>
   <td>
    <p>Adds <code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code></p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Images")}}</td>
   <td>{{Spec2("CSS3 Images")}}</td>
   <td>Initial definition of image.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.1")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("CSS1")}}</td>
   <td>{{Spec2("CSS1")}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Types">CSS Basic Data Types</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">Introduction to CSS: Values and Units </a></li>
</ul>

<div id="gtx-trans" style="position: absolute; left: 296px; top: 4116.4px;">
<div class="gtx-trans-icon"></div>
</div>