Funciones matemáticas CSS
Las funciones matemáticas de CSS permiten utilizar expresiones matemáticas como valores de propiedad. Aquí, explicaremos las funciones calc(),
max()y min().
La función calc()
La calc()función realiza un cálculo para ser utilizado como el valor de la propiedad.
Sintaxis CSS
calc(expression)
| Value | Description |
|---|---|
| expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
Veamos un ejemplo:
Ejemplo
Usa 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;
}
La función max()
La max()función utiliza el valor más grande, de una lista de valores separados por comas, como valor de propiedad.
Sintaxis CSS
max(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
Veamos un ejemplo:
Ejemplo
Use max() para establecer el ancho de #div1 en el valor que sea mayor, 50% o 300px:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
La función min()
La min()función utiliza el valor más pequeño, de una lista de valores separados por comas, como valor de propiedad.
Sintaxis CSS
min(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
Veamos un ejemplo:
Ejemplo
Use min() para establecer el ancho de #div1 en el valor más pequeño, 50% o 300px:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Todas las funciones matemáticas CSS
| Function | Description |
|---|---|
| calc() | Allows you to perform calculations to determine CSS property values |
| max() | Uses the largest value, from a comma-separated list of values, as the property value |
| min() | Uses the smallest value, from a comma-separated list of values, as the property value |