Funciones matemáticas CSS

Tabla de contenido

    Mostrar tabla de contenidos

Las funciones matemáticas de CSS permiten que las expresiones matemáticas sean utilizados como valores de propiedad. Aquí explicaremos el calc(), Funciones max() y min().

La función calc()

La función calc() realiza un cálculo que se utilizará como valor de propiedad.

Sintaxis CSS

calc(expression)
expression

Requerido. Una expresión matemática. El resultado se utilizará como valor.
Se pueden utilizar los siguientes operadores: + - * /

Veamos un ejemplo:

Ejemplo

Utilice calc() para calcular el ancho de un elemento <div>:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
    border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}
</style>
</head>
<body>

<h1>The calc() Function</h1>

<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>

<div id="div1">Some text...</div>

</body>
</html>

La función max()

La función max() utiliza el valor más grande, de una lista de valores separados por comas, como valor de propiedad.

Sintaxis CSS

 max(value1, value2, ...)
value1, value2, ...

Requerido. Una lista de valores separados por comas, donde está el valor más grande elegido

Veamos un ejemplo:

Ejemplo

Utilice max() para establecer el ancho de #div1 en el valor que sea mayor, 50% o 300 píxeles:

#div1 {
  background-color: yellow;
  height: 100px;
  
  width: max(50%, 300px);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}
</style>
</head>
<body>

<h1>The max() Function</h1>

<p>Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:</p>

<div id="div1">Some text...</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>

La función min()

La función min() utiliza el valor más pequeño, de una lista de valores separados por comas, como valor de propiedad.

Sintaxis CSS

 min(value1, value2, ...)
value1, value2, ...

Requerido. Una lista de valores separados por comas, donde está el valor más pequeño elegido

Veamos un ejemplo:

Ejemplo

Utilice min() para establecer el ancho de #div1 en el valor que sea más pequeño, 50% o 300 píxeles:

#div1 {
  background-color: yellow;
  height: 100px;
  
  width: min(50%, 300px);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}
</style>
</head>
<body>

<h1>The min() Function</h1>

<p>Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:</p>

<div id="div1">Some text...</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>

Todas las funciones matemáticas de CSS

calc()

Le permite realizar cálculos para determinar los valores de las propiedades CSS

max()

Utiliza el valor más grande, de una lista de valores separados por comas, como El valor de la propiedad

min()

Utiliza el valor más pequeño, de una lista de valores separados por comas, como El valor de la propiedad