oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS

Curso CSS - Lección 9: Modelo de caja

¿Qué es esto del modelo de caja? El modelo de caja contiene opciones en lo referente al ajuste de bordes, márgenes y relleno. Podríamos decir que son cajas imaginarias que se generan en cada elemento HTML.

Modelo de caja en CSS

vamos a ver un ejemplo con un encabezado y algo de texto, el código utilizado para tal caso prodría ser este:

<h1>Frases historicas</h1>

<p>Hemos aprendido a volar como los pájaros, a nadar como los peces; pero no hemos aprendido el sencillo arte de vivir juntos como hermanos.</p>

<p>Martín L.King</p>

Añadiendole un poco de diseño sobre la fuente, lo podríamos visualizar así:

Este ejemplo está compuesto por dos elementos:<h1> y <p>.

Entonces los modelos de caja para estos dos elementos los podríamos mostrar así:

Todas esas cajas que ves son cajas que estan rodeando a cada elemento HTML. Te aseguro que aunque ahora lo veas un poco complicado no es nada del otro mundo, y con un poco de práctica no te debería suponer ningún problema el dominar los márgenes, bordes, etc...

Además todas estas cajas las podemos ajustar usando CSS. En las siguientes lecciones explicamos como.

Resuelve tus dudas en el Foro OTW.

Quiero aprender más!!!

Menú
Indice del Curso
  1. Introducción
  2. ¿Qué es CSS?
  3. Sintaxis de CSS
  4. Fondos y colores
  5. Fuentes
  6. Texto
  7. Enlaces
  8. Atributos "class" e "id"
  9. Elementos "span" y "div"
  10. Modelo de caja
  11. Modelo de caja (margen y relleno)
  12. Modelo de caja (bordes)
  13. Modelo de caja (altura y anchura)
  14. Elementos flotantes
  15. Posicionar elementos
  16. Capas (z-index)

©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es

Design By: JTole®