¿Qué son los porcentajes en CSS?
Los porcentajes en CSS son valores relativos cuyo tamaño de referencia se define por separado para cada propiedad. Un porcentaje puede resolverse respecto a un bloque contenedor, al tamaño de fuente o a otra dimensión calculada.
Cómo funcionan los porcentajes en CSS
Un valor porcentual no tiene una equivalencia universal en píxeles; la gramática de la propiedad determina tanto si se permite como qué cantidad sirve de base. La resolución puede ocurrir durante el cálculo del valor calculado o del valor utilizado, y una dimensión contenedora indefinida puede hacer que algunos porcentajes se comporten de forma similar a auto. Los porcentajes también pueden participar en funciones como calc() y combinarse con longitudes cuando la gramática lo permite. Son fundamentales para el diseño fluido, las transformaciones, los fondos, la tipografía y el posicionamiento.
Datos clave
- Para width, un porcentaje normalmente se refiere al ancho del bloque contenedor, mientras que los valores porcentuales de translate() se refieren a la propia caja de referencia del elemento transformado.
- El padding superior e inferior expresado en porcentajes se basa en el tamaño en línea del bloque contenedor en los modos habituales de escritura horizontal, algo que suele sorprender al crear técnicas de relación de aspecto.
- Una altura porcentual necesita que la altura del bloque contenedor pueda resolverse en muchos contextos de diseño; de lo contrario, puede comportarse como auto, por lo que
height: 100%no llena por sí mismo el espacio libre.
Cuándo son relevantes los porcentajes en CSS
Usa porcentajes cuando un elemento deba escalar con su dimensión de referencia pertinente en lugar de permanecer fijo. Confirma la base porcentual de la propiedad, porque el mismo valor puede resolverse de forma distinta para el ancho, la altura y las transformaciones.