Curso de CSS: Box Sizing, Overflow, Position y Flexbox

Repaso del Modelo de la Caja y Box Sizing

El modelo de la caja (box model) determina cómo se calculan las dimensiones de los elementos. Por defecto, el ancho y alto no incluyen el padding ni el border.
• Para solucionar inconsistencias, se recomienda usar box-sizing: border-box.
• La retrocompatibilidad explica por qué los navegadores no aplican esto por defecto.

Gestión del Desbordamiento (Overflow)

Cuando el contenido excede las dimensiones de su caja, surgen problemas de visualización.
• overflow: hidden: Recorta el contenido sobrante.
• overflow: scroll o auto: Permite desplazarse dentro de la caja.
• Text Overflow: El uso de text-overflow: ellipsis es la técnica estándar para indicar contenido truncado.

Dominando el Positioning

El posicionamiento es fundamental para el diseño web:
• static: Valor por defecto, sigue el flujo del documento.
• absolute: Posiciona el elemento respecto al primer ancestro posicionado (relative, absolute o fixed).
• relative: Crea un contexto para sus descendientes absolutos.
• fixed: Fija el elemento al viewport, ignorando el scroll.
• sticky: Mantiene el elemento visible dentro de su contenedor mientras se hace scroll.

Contexto de Apilamiento y Z-Index

"El contexto de apilamiento no es solo 2D, debemos pensar que actúa en un eje Z, una capa encima de otra."

El z-index define la prioridad de apilamiento, pero depende de la creación de contextos (stacking contexts) definidos por propiedades como opacity, transform o position.

Flexbox: Diseño flexible

Flexbox facilita la alineación bidimensional en un eje principal.
• flex-direction: Define el eje (row o column).
• justify-content y align-items: Controlan la distribución espacial en el eje principal y cruzado, respectivamente.
• flex-grow, flex-shrink y flex-basis: Propiedades clave para el crecimiento y reducción proporcional de elementos.