English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

manual de referencia CSS

reglas CSS @

大全 de propiedades CSS

La función CSS calc()

La función CSS calc() te permite realizar algunas operaciones de cálculo al declarar valores de propiedades CSS. Puede utilizarse en los siguientes casos: <length>、<frequency>、<angle>、<time>、<number> o <integer>。

Función CSS

Ejemplo en línea

Usar la función calc() para calcular el ancho del elemento <div>:

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Guía básica(oldtoolbag.com)</title>　
<style>
#div1　{
　　　　position: absolute;
　　　　left:　50px;
　　　　width: calc(100%　-　100px);
　　　　border:　1px sólido negro;
　　　　background-color: yellow;
　　　　padding:　5px;
　　　　text-align: center;
}
</style>
</head>
<body>
<p>Crear un div que cubra toda la pantalla, div con　5Un espacio de 0px: </p>
<div id="div1">algunos textos...</div>
</body>
</html>
Prueba y mira ‹/›

Definición y uso

La función calc() se utiliza para calcular valores de longitud dinámicamente.

  • Es necesario tener en cuenta que se debe mantener un espacio en blanco antes y después del operador, por ejemplo:width: calc(100% - 10px);

  • Cualquier valor de longitud se puede calcular con la función calc();

  • La función calc() admite "+", "-", "*", "/Operación;

  • La función calc() utiliza las reglas estándar de prioridad de operaciones matemáticas;

Versión de soporte: CSS3

Compatibilidad del navegador

Los números en la tabla representan el número de versión del navegador que admite la primera vez esta función.

"webkit" o "moz" o "o" especifican el número de la primera versión del navegador que admite esta función como prefijo.

Función




calc()26.0
19.0　-webkit-		9.016.0
4.0　-moz-		7.0
6.0　-webkit-		15.0

Sintaxis CSS

calc(expresión)
ValorDescripción
expressionObligatorio, una expresión matemática, el valor resultante se utilizará como retorno después de la operación.
La función calc() utiliza una expresión como parámetro, y el resultado de esta expresión se utiliza como valor. Esta expresión puede ser cualquier combinación de operadores, una expresión simple que siga las reglas estándar de los operadores. Ejemplo: width: calc(100% - 80px);

Función CSS

Regla @charset CSSFunciones CSS (Functions)