Referencia Completa de Propiedades CSS Fundamentales para Maquetación Web

1. Box Model: Cálculo y Ocupación de Espacio

Define cómo se calcula y ocupa espacio una caja en el documento.

box-sizing

• content-box: El tamaño NO incluye padding ni border.
• border-box: El tamaño SÍ incluye padding y border (el recomendado en el 99% de los casos).

Función: Define cómo se calcula el ancho/alto final del elemento.

padding

• Valores: px, rem, %, o valores individuales para top/right/bottom/left.

Función: Espacio dentro de la caja (relleno).

margin

• Valores: px, rem, %, auto.

Función: Espacio fuera de la caja. El valor auto se utiliza comúnmente para centrar bloques.

border

• Valores: width style color (ejemplo: 1px solid black).

Función: Dibuja un borde alrededor de la caja.

overflow

• visible: Permite que el contenido se salga del límite de la caja.
• hidden: Corta el contenido que se desborda.
• scroll: Muestra barras de desplazamiento siempre.
• auto: Muestra barras de desplazamiento solo si es necesario.

Función: Controla el contenido que se “desborda” de los límites del elemento.

2. Display: Comportamiento de la Caja en el Flujo

display

Define cómo el elemento existe y afecta al resto de elementos en el flujo del documento.

• block: Ocupa todo el ancho disponible; respeta width/height.
• inline: Fluye con el texto; no respeta width/height.
• inline-block: Se comporta en línea, pero permite definir su propio tamaño.
• flex: Convierte el elemento en un contenedor flexible en un eje.
• grid: Convierte el elemento en un contenedor basado en rejilla.
• none: Desaparece visualmente y se elimina del flujo.
• contents: Desaparece la caja contenedora, pero sus hijos permanecen en el flujo.
• table / table-row / table-cell: Comportamiento tipo tabla.
• flow-root: Crea un flujo independiente (útil para limpiar floats).

3. Ejes (Flex y Grid): Distribución de Elementos Hijos

Flexbox

Herramientas para la alineación en un único eje (principal o secundario).

flex-direction

• row (horizontal)
• column (vertical)

justify-content (Eje Principal)

• flex-start, center, flex-end
• space-between, space-around, space-evenly

align-items (Eje Secundario)

• flex-start, center, flex-end, stretch, baseline

flex-wrap

• nowrap: Una sola línea.
• wrap: Permite múltiples líneas.
• wrap-reverse: Múltiples líneas en orden invertido.

gap

• Valores: px, rem, %.

Función: Espacio entre los elementos hijos.

Grid

Herramientas para la alineación en dos dimensiones (filas y columnas).

grid-template-columns / rows

Define el número y tamaño de las columnas o filas.

Ejemplo: repeat(3, 1fr)

gap / row-gap / column-gap

Define el espacio entre las celdas de la rejilla.

justify-items / align-items

Controla la alineación del contenido dentro de cada celda.

grid-auto-flow

• row, column, dense.

Función: Decide cómo se rellenan automáticamente los huecos de la rejilla.

4. Espaciado: Margen, Relleno y Distancia entre Elementos

Define cuánto “respira” el diseño, controlando el aire dentro, fuera y entre los elementos.

• margin: Espacio afuera del borde.
• padding: Espacio adentro del borde.
• gap: Espacio entre elementos (funciona únicamente en contenedores flex o grid).

5. Tamaño: Dimensiones y Límites

Controla el ancho y alto real del elemento.

width / height

• Valores: auto, px, rem, %, vw (viewport width), vh (viewport height).

min-width / min-height

Establece el tamaño mínimo permitido para el elemento.

max-width / max-height

Establece el tamaño máximo permitido para el elemento.

fit-content

Ajusta el tamaño al contenido sin exceder los límites del contenedor.

6. Posición: Ubicación Exacta en la Página

position

• static: Posición normal, no acepta desplazamientos (top, left, etc.).
• relative: Se puede “mover” respecto a su posición normal, pero mantiene su espacio en el flujo.
• absolute: Se sale del flujo normal; se posiciona respecto al ancestro posicionado más cercano.
• fixed: Permanece pegado al viewport (ventana del navegador).
• sticky: Se comporta como relative hasta que alcanza un punto de desplazamiento, donde se pega como fixed.

top / right / bottom / left

Valores numéricos que definen el desplazamiento. Funcionan solo si position no es static.

z-index

Controla qué elemento está encima de otros en el eje Z (profundidad).

7. Proporción: Forma y Contenido Multimedia

aspect-ratio

Fija la forma del elemento manteniendo una relación de aspecto específica.

Ejemplos: 1 / 1 (cuadrado), 16 / 9.

object-fit (Imágenes/Videos)

• contain: El contenido se ajusta sin ser recortado.
• cover: El contenido llena el espacio, recortando si es necesario.
• fill: El contenido se estira para llenar el espacio.
• none: Mantiene el tamaño original.
• scale-down: Reduce el contenido si excede los límites.

object-position

Define la posición del contenido multimedia dentro de su caja (ej: center, top, right, coordenadas).

8. Visual: Apariencia y Estilo del Componente

Define qué tan destacado, claro o estético se ve el elemento.

Color y Fondo

• color: Color del texto.
• background-color / background-image: Colores, gradientes o imágenes de fondo.
• background-size: cover, contain, auto.
• background-position / background-repeat.

Bordes y Sombras

• border-radius: Define esquinas redondeadas.
• box-shadow: Aplica sombras externas al elemento.

Transparencia

• opacity: Controla la transparencia del elemento (valor entre 0 y 1).

9. Texto: Estilo Tipográfico y Formato

Propiedades de Fuente

• font-size: Tamaño del texto.
• font-weight: Grosor de la fuente.
• line-height: Espacio vertical entre líneas.

Alineación y Transformación

• text-align: left, center, right, justify.
• text-transform: uppercase, lowercase, capitalize.

Control de Flujo de Texto

• white-space: Controla saltos de línea y espacios (ej: normal, nowrap, pre).
• word-break: Define si las palabras largas deben romperse o no.

10. Interacción: Respuesta al Usuario

cursor

Define el tipo de puntero que se muestra al pasar sobre el elemento (ej: pointer, text, not-allowed).

user-select

Permite o impide que el usuario pueda seleccionar el texto.

pointer-events

Permite o bloquea la interacción del mouse con el elemento.

11. Animación: Movimiento y Transiciones

transition

Suaviza los cambios de estado de las propiedades CSS a lo largo del tiempo.

transform

Permite modificar la forma y posición del elemento en 2D o 3D (mover, rotar, escalar, deformar).

animation

Define una animación completa utilizando @keyframes.

12. Responsive: Adaptación al Entorno

@media

Define reglas CSS específicas basadas en el tamaño de la pantalla (viewport) o tipo de dispositivo.

@container

Define reglas CSS basadas en el tamaño del contenedor padre, no del viewport.

13. Estados y Pseudoelementos: Reacciones y Decoración

Permiten aplicar estilos basados en el estado del elemento o insertar contenido decorativo.

Pseudoclases (Estados)

• :hover: Se activa cuando el puntero del ratón pasa por encima.
• :active: Se activa mientras el elemento está siendo presionado.
• :focus / :focus-visible: Se activa cuando el elemento recibe foco (generalmente por teclado).

Pseudoelementos (Decoración)

• ::before / ::after: Insertan contenido visual extra o decorativo antes o después del contenido real del elemento.