Funciones matemáticas de CSS

Las funciones matemáticas de CSS permiten usar expresiones matemáticas como valores de atributo. Este capítulo explicará calc(),max() Y min() Función.

Función calc()

calc() La función realiza el cálculo y utiliza el resultado como valor de atributo.

Sintaxis de CSS

calc(expression)
Valor Descripción
expression Obligatorio. Expresión matemática. El resultado se utilizará como valor. Se pueden usar los siguientes operadores: +, -, *, /

Veamos un ejemplo:

Ejemplo

Uso calc() Calcular el ancho del elemento <div>:

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

Prueba por ti mismo

Función max()

max() La función utiliza el valor mayor de la lista de valores separados por comas como valor de atributo.

Sintaxis de CSS

max(value1, value2, ...)
Valor Descripción
value1, value2, ... Obligatorio. Lista de valores separados por comas - seleccionar el valor mayor.

Veamos un ejemplo:

Ejemplo

Uso max() Establecer el ancho de #div1 al mayor de 50% o 300px:

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

Prueba por ti mismo

Función min()

min() La función usa una lista de valores separados por comas para obtener el valor más pequeño de la lista como valor del atributo.

Sintaxis de CSS

min(value1, value2, ...)
Valor Descripción
value1, value2, ... Obligatorio. Una lista de valores separados por comas; elige el valor más pequeño

Veamos un ejemplo:

Ejemplo

Uso min() Establecer el ancho de #div1 en el valor más pequeño entre 50% o 300px:

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

Prueba por ti mismo

Referencia de funciones CSS

Para obtener una lista completa de todas las funciones CSS, visite nuestra Manual de referencia de funciones CSS.