Función CSS calc()
Funciones CSSEjemplo
Usar la función calc() para calcular el ancho del elemento <div>:
Pruébalo »
Definición y uso
La función calc() se utiliza para calcular dinámicamente valores de longitud.
- Ten en cuenta que se debe dejar un espacio antes y después de los operadores, por ejemplo:
width: calc(100% - 10px)； - Cualquier valor de longitud se puede calcular utilizando la función calc();
- La función calc() admite las operaciones '+', '-', '*', '/';
- La función calc() utiliza las reglas estándar de prioridad de las operaciones matemáticas;
Versión compatible: CSS3
Soporte del navegador
Los números en la tabla indican la primera versión del navegador que admite la función.
El número especificado por 'webkit', 'moz' u 'o' es el prefijo de la primera versión que admite la función.
| Función | |||||
|---|---|---|---|---|---|
| calc() | 26.0 19.0 -webkit- |
9.0 | 16.0 4.0 -moz- |
7.0 6.0 -webkit- |
15.0 |
Sintaxis CSS
calc(expression)
| Valor | Descripción |
|---|---|
| expression | Obligatorio, una expresión matemática; el resultado tomará el valor de retorno después de la operación. |
Ajustar automáticamente el tamaño de un campo de formulario para adaptarse al tamaño de su contenedor
calc()Otro caso de uso es asegurar que un campo de formulario se ajuste al espacio disponible actual, sin sobrepasar el borde de su contenedor al comprimirse, manteniendo al mismo tiempo un margen exterior adecuado.
En el siguiente ejemplo, el elemento form utiliza 1/6 del ancho disponible de la ventana; luego, para que el elemento input dentro del form mantenga un tamaño adecuado, usamos calc() nuevamente para que su ancho sea el ancho de su contenedor menos 1em. El siguiente
Ejemplo
Pruébalo »
Otras extensiones