应用值

  • 版本网址缩略名: CSS/used_value
  • 版本标题: 应用值
  • 版本 id: 411519
  • 创建于:
  • 创建者: yan
  • 是否是当前版本?
  • 评论

修订内容

CSS 属性的应用值(used value)是完成所有计算后最终使用的值,可以由 window.getComputedStyle 获取。尺寸 (例如 width, line-height) 单位为像素, 简写属性 (例如 background) 与组成属性相符 (例如 background-color), displayposition 、float相符,每个 CSS 属性都有值。

详情

计算出CSS属性的最终值有三个步骤。首先,指定值specified value 取自样式层叠 (选取样式表里权重最高的规则), 继承 (如果属性可以继承则取父元素的值),或者默认值。然后,按规范算出 计算值computed value  (例如, span 指定 position: absolutedisplay 变为 block)。最后,计算布局(尺寸比如 auto 或 百分数 换算为像素值 ), 结果即 应用值used value。这些步骤是在内部完成的,脚本只能使用 window.getComputedStyle 获得最终的应用值。

举例

没有明确的宽度。指定的宽度: auto (默认). 计算的宽度: auto. 应用的宽度: 998px (举例而言)。
明确的宽度: 50%. 指定的宽度: 50%. 计算的宽度: 50%. 应用的宽度: 447px
明确的宽度: inherit. 指定的宽度: 50%. 计算的宽度: 50%. 应用的宽度: 221px .

与计算值的区别

CSS 2.0 只定义了 计算值 computed value 作为属性计算的最后一步。 CSS 2.1 引进了定义明显不同的的应用值,这样当父元素的计算值为百分数时子元素可以显式地继承其高宽。 对于不依赖于布局的 CSS 属性 (例如 display, font-size, line-height),计算值与应用值一样,相反就会不一样  (引自 CSS 2.1 Changes: Specified, computed, and actual values):

  • background-position
  • bottom, left, right, top
  • height, width
  • margin-bottom, margin-left, margin-right, margin-top,
  • min-height, min-width
  • padding-bottom, padding-left, padding-right, padding-top
  • text-indent

规范

CSS Level 2: Used Values

See also

修订版来源

<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>),&nbsp;<code>display</code> 与 <code>position</code> <code>、float相符,</code>每个 CSS 属性都有值。</p>
<h2 id="Details">详情</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>&nbsp; (例如, <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="Example">举例</h2>
<div style="border: 1px solid red">
  没有明确的宽度。指定的宽度: auto (默认). 计算的宽度: auto. 应用的宽度: 998px (举例而言)。
  <div style="border: 1px solid green; width: 50%">
    明确的宽度: 50%. 指定的宽度: 50%. 计算的宽度: 50%. 应用的宽度: 447px<br />
    <div style="border: 1px solid blue; width: inherit">
      明确的宽度: inherit. 指定的宽度: 50%. 计算的宽度: 50%. 应用的宽度: 221px .</div>
  </div>
</div>
<h2 id="Difference_from_computed_values">与计算值的区别</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),计算值与应用值一样,相反就会不一样&nbsp; (引自 <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="Specification">规范</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="See_also">See also</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>
恢复到这个版本