La función calc() es una función incorporada en CSS que se utiliza para realizar cálculos basados en la propiedad CSS.
Sintaxis:
calc( Expression )
Parámetros: esta función acepta Expresión de parámetro único, que es obligatoria. Este parámetro contiene una expresión matemática que debe implementarse. Los operadores utilizados por estos parámetros son: +, -, *, / El siguiente
programa ilustra la función calc() en CSS:
Programa:
html
<!DOCTYPE html>
<html>
<head>
<title>calc function</title>
<style>
.geeks {
position: absolute;
left: 50px;
width: calc(100% - 20%);
height:calc(500px - 300px);
background-color: green;
padding-top:30px;
text-align: center;
}
.gfg {
font-size:40px;
font-weight:bold;
color:white
}
h1 {
color:white;
}
</style>
</head>
<body>
<div class = "geeks">
<div class = "gfg">GeeksforGeeks</div>
<h1>The calc() Function</h1>
</div>
</body>
</html>
Producción:
Comprender el funcionamiento de la función calc() en CSS
La función calc() en CSS realiza cálculos en función de los valores de su elemento principal o los valores proporcionados por el usuario durante el cálculo.
Entendamos el funcionamiento con más profundidad usando algún ejemplo:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=">
<title>Calc Function</title>
<style>
.parent{
background-color: skyblue;
}
.heading {
left: 30px;
width: calc(50% - 100px);
height: 100px;
background-color: #579dcf;
padding-top: 20px;
text-align: center;
}
h2 {
color: #e9e8e9;
}
</style>
</head>
<body>
<br>
<div class="parent">
<div class="heading">
<h2> Welcome to GEEKSFORGEEKS.</h2>
</div>
</div>
</body>
</html>
En el ejemplo de código anterior, la función calc() se usa para dar el valor de ancho al encabezado. Aquí, hemos utilizado el valor del padre que está configurado al 100% del ancho de la pantalla de forma predeterminada. El calc(50% – 100px) significa que el ancho del encabezado será igual al «50% del ancho del padre – 100 px». Por lo tanto, aquí usamos la función calc() con el valor del padre y un valor constante.
Aquí está la salida del código:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=">
<title>Calc Function</title>
<style>
.parent{
background-color: skyblue;
width: calc(80% - 2em);
}
.heading {
left: 30px;
width: calc(50% - 100px);
height: 100px;
background-color: #579dcf;
padding-top: 20px;
text-align: center;
}
h2 {
color: #e9e8e9;
}
</style>
</head>
<body>
<br>
<div class="parent">
<div class="heading">
<h2> Welcome to GEEKSFORGEEKS.</h2>
</div>
</div>
</body>
</html>
En el ejemplo de código anterior, hemos usado la función calc() dos veces. Primero, usando la función calc() hemos definido el valor del div principal. Luego, usando el valor del elemento div padre y usando la función calc(), definimos el valor del elemento div de encabezado. Por lo tanto, está claro que la función calc() presente en el elemento principal puede acceder al valor producido por la función calc() secundaria.
Aquí está la salida del código:
Navegador compatible:
- Google cromo 26
- Borde 12
- explorador de Internet 9
- Firefox 16
- Ópera 15
- Safari 7