Modelo de cajas en CSS

Introducción

Para poder entender como maquetar páginas sin tablas, utilizando solo CSS, debemos primero entender el modelo de cajas, que define la estructura de la página a la que aplicaremos los estilos.

Si estas acostumbrado a trabajar con tablas, sabes que tu pagina esta dividida en cuadrados definidos por celdas y tablas. Cuando trabajas con CSS-P, también trabajas con cuadrados. Estos cuadrados pueden ser definidos por elementos de la estructura de tu página, como encabezados y párrafos. Si quieres agrupar varios elementos, utilizas el tag <div> o <span> . Esto marca un bloque de contenido en tu pagina.

Pongamos como ejemplo, una pagina tipica, con encabezado, una barra lateral, contenido, y un pie. Podriamos estructurarla con divs como aparece a la izquierda.

Nuestro codigo se vería algo así:

<div id="header">
  aquí va el contenido del header
</div> 

<div id="barra">
	aquí va el contenido de la barra lateral
</div>

<div id="contenido">
	aquí va el contenido principal 
</div>

 <div id="pie">
      aquí va el contenido del pie de página 
</div> 

Cada div puede contener otros divs, párrafos, imágenes o cualquier otro elemento, y con CSS podemos definir sus propiedades, como color de fondo, bordes, tamaño, posicionamiento, fuentes, etc.

Bloques y Líneas

Hay dos tipos de cajas: block e inline . Un parrafo, por ejemplo, se considera como un bloque, y por lo tanto por default se despliega como tal. Esto quiere decir que un párrafo que siga a otro se desplegará así:

[parrafo1]

[parrafo2]

Un elemento como un <span>se considera como un elemento en linea, o inline, y por lo tanto un span seguirá a otro linealmente, asi:

[span1] [span2]

Se puede cambiar el tipo de caja utilizando la propiedad display:block o display:inline.

Usuarios que han visto este tema también han visto...

- Efectos en textos e imágenes con CSS
- Arreglar los bordes punteados en Internet Explorer con CSS
- Centrar imágenes con CSS
- Cómo quitar subrayado de los enlaces
- Posicionar una imagen rodeada de texto con CSS

- Versión imprimible de este documento
- Enviar por e-mail este documento