使用价值 | used value

used value

CSS属性的使用值是所有计算完成后该属性的最终值。

用户代理完成计算后，每个CSS属性都有一个使用的值。使用的维度值（例如width，line-height）以像素为单位。速记性质（例如，背景）的使用的值是与它们的组分性质的（例如，一致的background-color，display)并与position和float。

对于某些属性，JavaScript可以通过该window.getComputedStyle方法检索使用的值。

细节

计算任何CSS属性的最终值有四个步骤。首先，指定的值是级联（选择最具体的更改属性的样式表规则），继承（如果属性是可继承的，则使用与父项相同的计算值）或使用默认值。然后，所计算的值是根据本说明书中计算出的（例如，span与position: absolute将有其计算display改为block）。然后，计算布局（auto相对于父项的尺寸或百分比用像素值替换），结果就是使用的值。

最后，根据当地环境的局限性进行改造，其结果是具有实际价值。实际值是应用任何近似值后的使用值。例如，用户代理可能只能渲染具有整数像素宽度的边框，因此必须近似计算出的宽度，否则用户代理可能会被迫仅使用黑色和白色阴影，而不是全色。这些步骤是在内部计算的。

JavaScript只能读取最终使用的值window.getComputedStyle。此方法可能会返回计算值，具体取决于属性。它返回的值通常被称为resolved values）。

例

在调整%29上计算和显示三个元素%28更新的使用宽度：

HTML

<div id="no-width">
  <p>No explicit width.</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>Explicit width: 50%.</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>Explicit width: inherit.</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>

CSS

#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/* Make results easier to see: */
div {
  border: 1px solid red;
  padding: 8px;
}

JavaScript

function updateUsedWidth(id) {
  var div = document.getElementById(id
  var par = document.querySelector(`#${id} .show-used-width`
  var wid = window.getComputedStyle(div)["width"];
  par.textContent = `Used width: ${wid}.`;
}

function updateAllUsedWidths() {
  updateUsedWidth("no-width"
  updateUsedWidth("width-50"
  updateUsedWidth("width-inherit"
}

updateAllUsedWidths(
window.addEventListener('resize', updateAllUsedWidths

结果

与计算值之差

CSS 2.0只定义了计算值作为属性计算的最后一步。然后，CSS 2.1引入了使用价值的明确定义。然后，元素可以显式继承父元素的宽度/高度，其计算值是一个百分比。对于不依赖于布局的CSS属性（例如，display，font-size，line-height），计算值和使用值是相同的。这些是取决于布局的CSS 2.1属性，因此它们具有不同的计算值和使用值:(取自CSS 2.1更改：指定值，计算值和实际值）：

• 背景位置

• 下，左，右，上

• 高度，宽度

• 边缘-底部，边缘-左，边缘-右，边缘-顶部，

• 最小高度，最小宽度

• 填充-底部，填充-左，填充-右，填充-顶部

• 文本缩进

规范