Funciones Math del CSS

¿Qué son las funciones math?

Las funciones math del CSS permiten expresiones matemáticas para ser usadas como valores de propiedades. Así, en este artículo explicaremos las funciones existentes.

La función calc()

La función calc() realiza un calculo matemático para ser utilizado como un valor de propiedad.

Sintaxis CSS:

calc( expresión )

Parámetro	Descripción
expresión	La expresión es Requerida. La expresión debe ser una expresión matemática. El resultado será utilizado como valor de una propiedad. Los operadores permitidos son: + - * /

Ejemplo de la función calc()

Supongamos un elemento div establecido de la siguiente manera:

CSS:

#calc-1 {
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 4px; 
} 

HTML:

<div id="calc-1">
  Algún texto ...
</div>

Muestra:

Como podemos ver en la muestra; el elemento div es visualizado con un ancho del 100% restándole 100 pixeles de anchura.

La función max()

La función max() calcula el valor mayor de una lista de valores separados por comas, y este lo establece como el valor de la propiedad.

Sintaxis CSS

max( valor1 , valor2, ...  )

Parámetros	Descripción
valor1, valor2, ...	La lista de valores separada por comas es Requerida. Selleccionara el valor mayor.

Ejemplo de la función max()

Supongamos el siguiente código para un div:

CSS:

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

HTML:

<div class="max-1">
  Algún Texto
</div>

Muestra:

Como podemos ver, la función max() establecerá el ancho, cualquiera que sea mayor, ya sea el 50% o 300px. Obviamente, el 50% varía dependiendo de la resolución de tu ventana del navegador, puedes cambiar dicho tamaño para ver el efecto.

La función min()

La función min() calcula el valor menor de una lista de valores separados por comas, y este lo establece como el valor de la propiedad.

Sintaxis CSS

min( valor1 , valor2, ...  )

Parámetros	Descripción
valor1, valor2, ...	La lista de valores separada por comas es Requerida. Selleccionara el valor menor.

Ejemplo de la función min()

Supongamos el siguiente código para un div:

CSS:

.max-1 {
  background-color: yellow;
  height: 100px;
  width: min( 50%, 300px );
}

HTML:

<div class="min-1">
  Algún Texto
</div>

Muestra:

Como podemos ver, la función min() establecerá el ancho, cualquiera que sea menor, ya sea el 50% o 300px. Obviamente, el 50% varía dependiendo de la resolución de tu ventana del navegador, puedes cambiar dicho tamaño para ver el efecto.