Manual de HTML: Cajas (div)

Cajas (div)

  • <div></div>

    Esta etiqueta (division) define una sección en un documento HTML e inserta retorno de carro. Se utiliza a menudo para agrupar elementos y aplicar estilos, y supuso un antes y un después en el formateo y posicionamiento de elementos en HTML.

    Ejemplo: en esta sección del documento el texto será verde:

    <div style="color: green">
      <h3>Esto es el titulo</h3>
      <p>Esto es un parrafo.</p>
    </div>

    … se ve así:

    Esto es el titulo

    Esto es un parrafo.

Recursos

Podemos posicionar una caja según tres esquemas:

  1. caja en flujo normal

    Dado que los div son elementos tipo bloque, en el flujo normal las cajas se colocan una después de otra, verticalmente.

  2. caja flotante

    Un div flotante tiene la propiedad float establecida a left o a right. Sale del flujo normal y se mueve a izquierda o derecha tanto como sea posible, hasta que su borde externo toca el borde del bloque de contención o el borde externo de otro flotante. El contenido puede fluir por su costado a no ser que lo impidamos mediante la propiedad clear (valores: left / right / both / none). Las cajas no posicionadas anteriores y posteriores a la caja flotante fluyen verticalmente como si el flotante no existiera.

  3. caja posicionada

    Un div con la propiedad position establecida a absolute o relative sale del flujo normal y establece un nuevo bloque de contención para los hijos. El posicionamiento puede ocasionar que las cajas se superpongan, por lo que tendremos que usar la propiedad z-index para establecer el orden de apilamiento adecuado. Para posicionar un div las propiedades que usaremos son: top, bottom, left y right y los valores podemos darlos como longitud, porcentaje o auto. El posicionamiento puede ser:

    • posicionamiento absoluto: un div con position: absolute; sale del flujo normal (no tiene ningún impacto sobre los hermanos siguientes) y se le asigna una posición con respecto al bloque de contención padre más cercano que esté posicionado, ya sea absoluto o relativo. Si ningún bloque de contención padre está posicionado tomará como referencia el body.
    • posicionamiento relativo: un div con position: relative; sale del flujo normal (la posición de los hermanos siguientes se calcula como si el div posicionado no se hubiera desplazado) y ocupa una posición relativa a la que le hubiera correspondido en el flujo normal.

Veamos algunos ejemplos de posicionamiento de cajas:

Ejemplo: este código muestra cuatro cajas en flujo normal:

<style>
#normal {
  width: 200px;
  height: 160px;
  border: 3px solid black;
  margin: 0;
}
#normal .red {
  width: 80px;
  height: 40px;
  border: 3px solid red;
  margin: 0;
}
#normal .blue {
  width: 30px;
  height: 30px;
  border: 3px solid blue;
  margin: 0;
}
#normal .orange {
  width: 20px;
  height: 30px;
  border: 3px solid orange;
  margin: 0;
}
#normal .green {
  width: 20px;
  height: 30px;
  border: 3px solid green;
  margin: 0;
}
</style>
<div id="normal">
  <div class="red"> </div>
  <div class="blue"> </div>
  <div class="orange"> </div>
  <div class="green"> </div>
</div>

… se ve así:

Ejemplo: ahora las cajas roja y azul son cajas flotantes (float: left;) y se apilan a la izquierda. Vemos que las cajas siguientes fluyen verticalmente como si las cajas flotantes no existieran:

<style>
#flotante {
  width: 200px;
  height: 160px;
  border: 3px solid black;
  margin: 0;
}
#flotante .red {
  float: left;
  width: 80px;
  height: 40px;
  border: 3px solid red;
  margin: 0;
}
#flotante .blue {
  float: left;
  width: 30px;
  height: 30px;
  border: 3px solid blue;
  margin: 0;
}
#flotante .orange {
  width: 20px;
  height: 30px;
  border: 3px solid orange;
  margin: 0;
}
#flotante .green {
  width: 20px;
  height: 30px;
  border: 3px solid green;
  margin: 0;
}
</style>
<div id="flotante">
  <div class="red"> </div>
  <div class="blue"> </div>
  <div class="orange"> </div>
  <div class="green"> </div>
</div>

… se ve así:

Ejemplo: la caja azul tiene posicionamiento relativo (position: relative;) y está desplazada respecto a la posición que le hubiera correspondido en el flujo normal. Las cajas siguientes fluyen verticalmente como si el div posicionado no se hubiera desplazado:

<style>
#relativo {
  width: 200px;
  height: 160px;
  border: 3px solid black;
  margin: 0;
}
#relativo .red {
  width: 80px;
  height: 40px;
  border: 3px solid red;
  margin: 0;
}
#relativo .blue {
  position: relative;
  top: 0;
  left: 30px;
  width: 30px;
  height: 30px;
  border: 3px solid blue;
  margin: 0;
}
#relativo .orange {
  width: 20px;
  height: 30px;
  border: 3px solid orange;
  margin: 0;
}
#relativo .green {
  width: 20px;
  height: 30px;
  border: 3px solid green;
  margin: 0;
}
</style>
<div id="relativo">
  <div class="red"> </div>
  <div class="blue"> </div>
  <div class="orange"> </div>
  <div class="green"> </div>
</div>

… se ve así:

Ejemplo: la caja azul tiene posicionamiento absoluto (position: absolute;) y está posicionada con respecto al bloque de contención padre más cercano que está posicionado. Si no posicionamos la caja negra la caja azul tomará como referencia el body. Las cajas siguientes fluyen verticalmente como si la caja posicionada no existiera:

<style>
#absoluto {
  position: relative;
  width: 200px;
  height: 160px;
  border: 3px solid black;
  margin: 0;
}
#absoluto .red {
  width: 80px;
  height: 40px;
  border: 3px solid red;
  margin: 0;
}
#absoluto .blue {
  position: absolute;
  top: 0;
  left: 30px;
  width: 30px;
  height: 30px;
  border: 3px solid blue;
  margin: 0;
}
#absoluto .orange {
  width: 20px;
  height: 30px;
  border: 3px solid orange;
  margin: 0;
}
#absoluto .green {
  width: 20px;
  height: 30px;
  border: 3px solid green;
  margin: 0;}
</style>
<div id="absoluto">
  <div class="red"> </div>
  <div class="blue"> </div>
  <div class="orange"> </div>
  <div class="green"> </div>
</div>

… se ve así:

Ejemplo: este código muestra una caja que aparece / desaparece al pasar el ratón por encima del enlace:

<style>
div#links a span {
  display: none;
}
div#links a:hover span {
  width: 125px;
  display: block;
  position: relative;
  top: 0px;
  left: 100px;
  margin: 10px;
  padding: 5px;
  background: black;
  text-align: center;
  color: #AAA;
  font: 10px Verdana, sans-serif;
  z-index: 100;
}
</style>
<div id="links">
  <a href="http://www.meyerweb.com/eric/css/">Eric Meyer site<span>A collection
    of things which interest me, and might interest you</span></a>
</div>

… se ve así (prueba a pasar el ratón por encima del enlace!):

Modelo de caja (div)

Propiedades CSS a considerar:

  • width x height: anchura x altura.
  • margin: margen.
  • border: borde.
  • padding: relleno o acolchado.

Ejemplo: este código:

<style>
#modelo {
  width: 400px;
  height: 290px;
  background-color: #00FFFF;
  border: 0;
  margin: 0;
}
#modelo .red {
  width: 80px;
  height: 40px;
  border: 3px solid red;
  margin: 0;
}
#modelo .orange {
  width: 250px;
  height: 120px;
  background-color: #9FDAEF;
  border: 15px solid orange;
  margin: 20px;
  padding: 20px;
}
</style>
<div id="modelo">
  <div class="red"> </div>
  <div class="orange"> </div>
</div>

… se renderiza así:

Recursos

Artículos en la categoría "Manual de HTML"

  1. Manual de HTML: Cómo tener una web
  2. Manual de HTML: Cabecera
  3. Manual de HTML: Estilos CSS
  4. Manual de HTML: Cajas (div)
  5. Manual de HTML: Texto
  6. Manual de HTML: Glosarios y Listas
  7. Manual de HTML: Enlaces
  8. Manual de HTML: Tablas
  9. Manual de HTML: Imágenes
  10. Manual de HTML: Frames (marcos)
  11. Manual de HTML: Colores HTML
  12. Manual de HTML: Colores seguros para la web
  13. Manual de HTML: Formularios
  14. Manual de HTML: Fuentes
  15. Manual de HTML: Objetos
  16. Manual de HTML: Eventos y scripts
  17. Manual de HTML: Caracteres especiales
  18. Manual de HTML: Unidades
  19. Manual de HTML: URL encoding
  20. Manual de HTML: Responsive Web Design (diseño web adaptativo)
  21. Manual de HTML: Geolocalización HTML5 en aplicaciones web

13 Comments:

  1. Me parece muy interesante tu aportación, en pronto la pondré en marcha, gracias

  2. muchas gracias,

  3. Gracias, muy bien explicado. Solo un consejito deberia ir la imagen al lado del detalle del ejemplo.

  4. muy buen tuto…. gracias bien explicado

  5. Muchas gracias sencillo y practico, Y tambien esta muy bien el link que has puesto en el ejemplo: http://meyerweb.com/eric/css/

    Gracias otra vez.

  6. Super didáctico e interesante, realmente te pasaste.

  7. que buen tuto, es sencillo pero igual de explicito que otros tutos

  8. Muchisimas gracias, me ha resultado muy util tu articulo!

  9. Orale M parece muy intersante tus ejemplos…Muchas gracias !!!

  10. jhonnatan zapata

    excelente aporte me sacaste de una

  11. no entiendo nada, je xD

  12. Un manual muy entendible. Muchas gracias!

  13. Pingback:Semana 3 | Día 3 – Patricio Gatica | Portafolio