1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
---
title: 应用值
slug: Web/CSS/used_value
translation_of: Web/CSS/used_value
---
<p>CSS 属性的应用值（used value）是完成所有计算后最终使用的值，可以由 <a href="/en-US/docs/DOM/window.getComputedStyle" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a> 获取。尺寸 (例如 <code>width</code>, <code>line-height</code>) 单位为像素, 简写属性 (例如 background) 与组成属性相符 (例如 <code>background-color，</code><code>display</code>) 与 <code>position</code> <code>、float相符，</code>每个 CSS 属性都有值。</p>
<h2 id="详情">详情</h2>
<p>计算出CSS属性的最终值有三个步骤。首先，<a href="/en-US/docs/CSS/specified_value" title="https://developer.mozilla.org/en/CSS/specified_value">指定值specified value</a> 取自样式层叠 (选取样式表里权重最高的规则), <a href="/en-US/docs/CSS/inheritance" title="en/CSS/inheritance">继承</a> (如果属性可以继承则取父元素的值)，或者默认值。然后，按规范算出 <a href="/en-US/docs/CSS/computed_value" title="en/CSS/computed value">计算值computed value</a> (例如， <code>span</code> 指定 <code>position: absolute</code> 后<code>display</code> 变为 <code>block</code>)。最后，计算布局(尺寸比如 <code>auto</code> 或 百分数 换算为像素值 )， 结果即 <strong>应用值used value</strong>。这些步骤是在内部完成的，脚本只能使用 <a href="/en-US/docs/DOM/window.getComputedStyle" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a> 获得最终的应用值。</p>
<h2 id="举例">举例</h2>
<div style="border: 1px solid red;">没有明确的宽度。指定的宽度: auto (默认). 计算的宽度: auto. 应用的宽度: 998px (举例而言)。
<div style="border: 1px solid green; width: 50%;">明确的宽度: 50%. 指定的宽度: 50%. 计算的宽度: 50%. 应用的宽度: 447px
<div style="border: 1px solid blue; width: inherit;">明确的宽度: inherit. 指定的宽度: 50%. 计算的宽度: 50%. 应用的宽度: 221px .</div>
</div>
</div>
<h2 id="与计算值的区别">与计算值的区别</h2>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">CSS 2.0 只定义了 <a href="/en-US/docs/CSS/computed_value" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/CSS/computed value">计算值 computed value</a> 作为属性计算的最后一步。 CSS 2.1 引进了定义明显不同的的应用值，这样当父元素的计算值为百分数时子元素可以显式地继承其高宽。 对于不依赖于布局的 CSS 属性 (例如 display, font-size, line-height)计算值与应用值一样，否则就会不一样 (引自 <a class="external" href="http://www.w3.org/TR/CSS2/changes.html#q36" title="http://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a>):</p>
<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
<li style="margin-bottom: 0.25em;">background-position</li>
<li style="margin-bottom: 0.25em;">bottom, left, right, top</li>
<li style="margin-bottom: 0.25em;">height, width</li>
<li style="margin-bottom: 0.25em;">margin-bottom, margin-left, margin-right, margin-top,</li>
<li style="margin-bottom: 0.25em;">min-height, min-width</li>
<li style="margin-bottom: 0.25em;">padding-bottom, padding-left, padding-right, padding-top</li>
<li style="margin-bottom: 0.25em;">text-indent</li>
</ul>
<h2 id="规范">规范</h2>
<p><a class="external" href="http://www.w3.org/TR/CSS2/cascade.html#used-value" title="http://www.w3.org/TR/CSS2/cascade.html#used-value">CSS Level 2: Used Values</a></p>
<h2 id="另见">另见</h2>
<ul>
<li><a href="/en-US/docs/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
<li>{{ CSS_key_concepts() }}</li>
<li><a href="/en-US/docs/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a></li>
</ul>
|
