Valor calculado

  • Enlace amigable (slug) de la revisión: CSS/Valor_calculado
  • Título de la revisión: Valor calculado
  • Id de la revisión: 166852
  • Creada:
  • Creador: HenryGR
  • ¿Es la revisión actual? No
  • Comentario /* Summary */

Contenido de la revisión

{{wiki.template('Traducción', [ "inglés", "CSS:computed_value", "en" ])}}


{{template.CSSRef()}}

Sumario

El valor computed value de una propiedad CSS es computado a partir de specified value de la siguiente forma:

  • mediante los valores especiales inherit y initial, y
  • realizando el cómputo necesario para alcanzar el valor descrito en la línea de "Computed value" del sumario de la propiedad.

El cálculo necesario para el "Computed value" de una propiedad, normalmente implica convertir valores relativos (como los expresados en unidades 'em' o en porcentajes) a valores absolutos.

Por ejemplo: si un elemento tiene un valor especificado de font-size: 16px y padding-top: 2em, el valor computado de padding-top es 32px (el doble del tamaño de la fuente).

Sin embargo, para algunas propiedades (aquellas con porcentajes relativos a algo que necesita un formato para ser determinados, tales como width, margin-right, text-indent, y top),los valores especificados en porcentajes se tornan valores computados. Ademas,los números especificados sin unidades en la propiedad line-height se convierten en valores computados, según se especifica. Estos valores relativos que quedan tras realizar el cómputo, se hacen absolutos cuando se determina el used value.

El uso principal de computed value (ademas de ser un paso de transición entre specified value y used value) es inheritance, incluyendo la palabra clave inherit.

Notes

The getComputedStyle DOM API returns the used value, not the computed value.

See Also

specified value, used value, actual value


{{ wiki.languages( { "fr": "fr/CSS/Valeur_calcul\u00e9e", "en": "en/CSS/computed_value" } ) }}

Fuente de la revisión

<p>
</p><p>{{wiki.template('Traducción', [ "inglés", "CSS:computed_value", "en" ])}}
</p><p><br>
{{template.CSSRef()}}
</p>
<h3 name="Sumario"> Sumario </h3>
<p>El valor <b>computed value</b> de una propiedad CSS es computado a partir de <a href="es/CSS/specified_value">specified value</a> de la siguiente forma:
</p>
<ul><li> mediante los valores especiales <code><a href="es/CSS/inherit">inherit</a></code> y <code><a href="es/CSS/initial">initial</a></code>, y
</li><li> realizando el cómputo necesario para alcanzar el valor descrito en la línea de "Computed value" del sumario de la propiedad.
</li></ul>
<p>El cálculo necesario para el "Computed value" de una propiedad, normalmente implica convertir valores relativos (como los expresados en unidades 'em' o en porcentajes) a valores absolutos.
</p><p>Por ejemplo: si un elemento tiene un valor especificado de <code>font-size: 16px</code> y <code>padding-top: 2em</code>, el valor computado de <code>padding-top</code> es <code>32px</code> (el doble del tamaño de la fuente).
</p><p>Sin embargo, para algunas propiedades (aquellas con porcentajes relativos a algo que necesita un formato para ser determinados, tales como <a href="es/CSS/width">width</a>, <a href="es/CSS/margin-right">margin-right</a>, <a href="es/CSS/text-indent">text-indent</a>, y <a href="es/CSS/top">top</a>),los valores especificados en porcentajes se tornan valores computados. Ademas,los números especificados sin unidades en la propiedad <a href="es/CSS/line-height">line-height</a> se convierten en valores computados, según se especifica. Estos valores relativos que quedan tras realizar el cómputo, se hacen absolutos cuando se determina el <a href="es/CSS/used_value">used value</a>.
</p><p>El uso principal de <a href="es/CSS/computed_value">computed value</a>  (ademas de ser un paso de transición entre <a href="es/CSS/specified_value">specified value</a> y <a href="es/CSS/used_value">used value</a>) es <a href="es/CSS/inherited_and_non-inherited_properties">inheritance</a>, incluyendo la palabra clave <a href="es/CSS/inherit">inherit</a>.
</p>
<h3 name="Notes"> Notes </h3>
<p>The <a href="es/DOM/window.getComputedStyle">getComputedStyle</a> DOM API returns the <a href="es/CSS/used_value">used value</a>, not the <a href="es/CSS/computed_value">computed value</a>.
</p>
<h3 name="See_Also"> See Also </h3>
<p><a href="es/CSS/specified_value">specified value</a>, <a href="es/CSS/used_value">used value</a>, <a href="es/CSS/actual_value">actual value</a>
</p>
<div class="noinclude">
</div>
<p><br>
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "fr": "fr/CSS/Valeur_calcul\u00e9e", "en": "en/CSS/computed_value" } ) }}
Revertir a esta revisión