Inicio › HTML, CSS & Layouts › CSS Intermedio & Box Model › El Box Model & Tipos de Caja
CSS Intermedio & Box Model Práctica ⏱ 1h 30min

El Box Model & Tipos de Caja

Entiende el modelo de caja CSS, box-sizing, tipos de display, dimensiones y bordes.

🚧 Contenido en desarrollo. Próximamente encontrarás aquí la lección completa.

Temas que cubrirás

  • El modelo de caja: content → padding → border → margin
  • Visualizarlo con DevTools de Chrome
  • box-sizing: content-box vs border-box
  • Reset universal con border-box
  • display: block, inline, inline-block
  • Colapso de márgenes
  • Dimensiones: width, height, max-width, min-height
  • overflow: visible, hidden, scroll, auto
  • border, border-radius, box-shadow

Reto

Maquetar 3 tarjetas de presentación (cards) usando box model, con bordes redondeados, sombra al hover, y un botón inline-block centrado.