Día 80: CSS Math Functions
La ruta del desarrollador web frontend autónomo🤹♂️
Las funciones matemáticas de CSS permiten utilizar expresiones matemáticas como valores de propiedad. Aquí, explicaremos las funciones
calc(),max()ymin().
La función calc()
La función calc() realiza un cálculo para ser utilizado como valor de propiedad.
Sintaxis
calc(expression)
| Valor | Descripción |
expression | Requerido. Una expresión matemática. El resultado se utilizará como valor. Se pueden utilizar los siguientes operadores: + - * / |
Veamos un ejemplo:
Ejemplo:
Usa calc() para calcular el ancho de un elemento <div>:
La función max()
La función max() usa el valor más grande, de una lista de valores separados por comas, como el valor de la propiedad.
Sintaxis
max(value1, value2, ...)
| Valor | Descripción |
value1, value2, ... | Requerido. Una lista de valores separados por comas, donde se elige el valor más grande. |
Veamos un ejemplo:
Ejemplo:
Use max() para establecer el ancho de #div1 en el valor que sea mayor, 50% o 300px:
La función min()
La función min() usa el valor más pequeño, de una lista de valores separados por comas, como valor de propiedad.
Sintaxis
min(value1, value2, ...)
| Valor | Descripción |
value1, value2, ... | Requerido. Una lista de valores separados por comas, donde se elige el valor más pequeño. |
Veamos un ejemplo.
Ejemplo:
Use min() para establecer el ancho de #div1 en el valor más pequeño, 50% o 300px:
Todas las funciones matemáticas
| Función | Descripción |
calc() | Le permite realizar cálculos para determinar los valores de propiedad de CSS. |
max() | Utiliza el valor más grande, de una lista de valores separados por comas, como valor de propiedad. |
min() | Utiliza el valor más pequeño, de una lista de valores separados por comas, como valor de propiedad. |
Resumen
Las funciones matemáticas CSS incluyen calc(), que permite realizar cálculos para determinar los valores de propiedad, max(), que utiliza el valor más grande de una lista de valores separados por comas, y min(), que utiliza el valor más pequeño. Cada función tiene su propia sintaxis y se pueden utilizar diferentes operadores matemáticos.
Traducido con 💚 desde W3Schools.com