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ícateEl 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:
- Contenido: Es el área donde se muestra el texto o las imágenes.
- Relleno (padding): Es el espacio entre el contenido y el borde.
- Borde (border): Es el contorno del relleno y el contenido.
- 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. Conbox-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 queclearfix
se utiliza para solucionar problemas de contenedores colapsados.
.float-left {
float: left;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
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.