En la página web HTML, al aplicar valores a las propiedades CSS, los cálculos se realizan mediante la función calc() .
Sintaxis:
element {
// CSS property
property : calc( expression)
}
Propiedades: La función calc() toma parámetros en forma de una sola expresión. El valor se convierte en el resultado de la expresión. Incluso la expresión sea la combinación de muchos operadores sigue las reglas de precedencia estándar.
- + Adición
- – Resta
- * Multiplicación. Cualquiera de los argumentos debe ser un número.
- / División. El lado derecho debe ser un número.
Se debe tener cuidado al escribir la sintaxis y se deben tener en cuenta los siguientes puntos.
- El operador + y – debe estar rodeado por un espacio en blanco, es decir, la altura (100 % – 30 px) se considera no válida, pero la altura (100 % – 30 px) es una expresión válida. Para los operadores / y * , el espacio en blanco no es necesario pero es muy recomendable.
- La división por 0 da como resultado un error.
Ejemplo 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
CSS Calc Viewport Units Workaround
</title>
<style>
body {
background-color: rgb(30, 240, 30);
}
h1 {
color: rgb(30, 240, 30);
}
div {
width: calc(100% - 100px);
/* Using the calc() func to change the
width of the div element by 100px */
border: 1px solid black;
background-color: white;
margin-top: 50px;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>working of the calc() function</h1>
</div>
</body>
</html>
producción:
Ejemplo 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
CSS Calc Viewport Units Workaround
</title>
<style>
body {
background-color: rgb(30, 240, 30);
}
h1 {
color: rgb(30, 240, 30);
/* Using the calc() func to change
the font size of the h1 element */
font-size: calc(1.5rem + 3vw);
}
div {
width: calc(100% - 100px);
border: 1px solid black;
background-color: white;
margin-top: 50px;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1> working of the calc() function</h1>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por jainanjali733985 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA