Imprimir

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.

Posicionamiento de cajas (div)

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

10 Comentarios en “Manual de HTML: Cajas (div)”

Deja un comentario