CSS: Modelo caja

CSS 3: Aprende a usar el modelo de caja y técnicas de posicionamiento para estructurar y diseñar tus páginas web de forma eficiente.

Aprende CSS GRATIS y certifícate

El modelo de caja en CSS 3 es fundamental para entender cómo se estructuran y diseñan las páginas web. Este concepto permite definir cómo se distribuyen los elementos en la página, considerando márgenes, bordes, relleno y contenido. A continuación, se presenta una guía para dominar el modelo de caja y las técnicas de posicionamiento en CSS 3.

El modelo de caja en CSS 3

El modelo de caja en CSS 3 se compone de cuatro áreas principales:

  1. Contenido: Es el área donde se muestra el texto o las imágenes.
  2. Relleno (padding): Es el espacio entre el contenido y el borde.
  3. Borde (border): Es el contorno del relleno y el contenido.
  4. Margen (margin): Es el espacio fuera del borde.

Propiedades del modelo de caja

  • width y height: Definen el ancho y alto del contenido.
  • padding: Controla el espacio interno alrededor del contenido.
  • border: Permite definir el estilo, grosor y color del borde.
  • margin: Establece el espacio externo alrededor del borde.

Ejemplo de modelo de caja

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 2px solid #000;
  margin: 20px;
}

En este ejemplo, .box tiene un ancho de 200px y una altura de 100px. El relleno es de 10px, el borde es de 2px y el margen es de 20px.

Técnicas de posicionamiento en CSS 3

El posicionamiento en CSS 3 es crucial para controlar la disposición de los elementos en una página. Existen varias técnicas de posicionamiento:

Posicionamiento estático

Es el valor por defecto. Los elementos se colocan en el flujo normal del documento.

.static {
  position: static;
}

Posicionamiento relativo

Permite desplazar un elemento respecto a su posición original sin afectar el flujo del documento.

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

Posicionamiento absoluto

Posiciona un elemento en relación a su contenedor más cercano que no tenga position: static.

.absolute {
  position: absolute;
  top: 50px;
  left: 100px;
}

Posicionamiento fijo

Fija un elemento en una posición específica de la ventana del navegador, independientemente del scroll.

.fixed {
  position: fixed;
  top: 0;
  right: 0;
}

Posicionamiento sticky

Combina características de relative y fixed. El elemento se comporta como relative hasta que se alcanza un umbral, momento en el que se comporta como fixed.

.sticky {
  position: sticky;
  top: 0;
}

Consideraciones adicionales

  • box-sizing: La propiedad box-sizing permite alterar el cálculo del ancho y alto de los elementos. Con box-sizing: border-box, el padding y el borde se incluyen en el ancho y alto total del elemento.
.box-sizing-example {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 2px solid #000;
}
  • float y clearfix: float permite que los elementos floten a la izquierda o derecha, mientras que clearfix se utiliza para solucionar problemas de contenedores colapsados.
.float-left {
  float: left;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
Empezar curso de CSS

Lecciones de este módulo de CSS

Lecciones de programación del módulo Modelo caja del curso de CSS.

Ejercicios de programación en este módulo de CSS

Evalúa tus conocimientos en Modelo caja con ejercicios de programación Modelo caja de tipo Test, Puzzle, Código y Proyecto con VSCode.