La función CSS calc() es una función incorporada que se utiliza para realizar cálculos basados en la propiedad CSS.
Funcionamiento de la función calc(): calc () es una función CSS incorporada, con el propósito de realizar cálculos mientras se especifican los valores de las propiedades CSS. Se puede utilizar cuando se permite una frecuencia, duración, número, tiempo, etc. Más específicamente, la función calc() se usa para proporcionar valores.
Sintaxis:
selector{
property-name: calc(Expression)
}
Parámetros: la función calc() acepta una expresión de parámetro único obligatoria. El valor pasado debe contener una expresión matemática.
Los operadores matemáticos básicos que se pueden utilizar en la expresión son los siguientes.
- + : Adición
- – : Resta
- * : Multiplicación (Un operando debe ser un número)
- / : División (El lado derecho debe ser un número)
Podemos usar diferentes unidades para cada valor en la expresión.
Tecnicismos de sintaxis:
- El operador debe estar rodeado de espacios en blanco. El uso de espacios en blanco con (*) y (/) es opcional pero recomendado. como calc (80% -10px) dará como resultado un error, la forma correcta es calc (80% – 10px).
- El analizador HTML genera un error si dividimos por cero.
- Se permite el anidamiento de calc(), el calc() interno puede tratarse simplemente como un paréntesis.
Trabajo: Los cálculos realizados por la función calc() de CSS se basan en los valores proporcionados por el usuario durante el cálculo. Si no se proporciona, el cálculo se realiza en función de los valores de su elemento principal.
Ejemplo 1: en el siguiente ejemplo, la altura del contenedor se establece en 1/3 del 100 % de la altura de la ventana gráfica y el ancho se establece en 1/2 del 80 % del ancho de la ventana gráfica. Se desconoce el valor exacto en unidades. Usamos calc() que proporcionará la altura y el ancho deseados al contenedor.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using Calc</title>
<style>
.container {
height: calc(100vh / 3);
width: calc(80vw / 2);
background-color: green;
font-family: cursive;
color: white;
text-align: center;
font-size: 2.3rem;
margin: auto;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
GeeksforGeeks
</div>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente ejemplo, tenemos dos contenedores, un contenedor principal y su contenedor secundario. Se conocen los valores exactos de alto y ancho del contenedor principal. Queremos calcular la altura y el ancho en relación con el contenedor principal. Entonces use calc() para especificar fácilmente la altura y el ancho deseados para el contenedor secundario.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using Calc</title>
<style>
* {
box-sizing: border-box;
}
.parent {
height: 12rem;
width: 25rem;
background-color: #a29bfe;
margin: auto;
}
.child {
height: calc(100% / 2);
width: calc(50% - 20px);
background-color: green;
color: white;
text-align: center;
font-family: cursive;
font-size: 1.2rem;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por siddharthredhu01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA