Tecnologías de la Información y la Comunicación
Curso 2014-2015

Modelo de cajas CSS: Box-Model

El diseño de cualquier página HTML está compuesto por cajas rectangulares.

El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web.

"Box-Model" es el comportamiento de CSS que hace que todos los elementos incluidos en una página Web se representen mediante cajas rectangulares. Cualquier objeto de una web (párrafos, listas, enlaces, imágenes, tablas, etc.) son cajas rectangulares. Los navegadores sitúan estas cajas de la forma que nosotros les hayamos indicado para maquetar la página.

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.

Modelo 3D de cajas propuesto en Hicksdesign:  http://www.hicksdesign.co.uk/boxmodel/

Modelo 3D de cajas animado:   http://redmelon.net/tstme/box_model/

box-model

CSS permite controlar:

  • El aspecto de todas las cajas: la altura y anchura de cada caja, el margen existente entre cajas y el espacio de relleno interior que muestra cada una de ellas.
  • La forma en la que se visualizan las cajas: se pueden ocultar, desplazar respecto de su posición original y fijarlas en una posición específica dentro del documento.

Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde.

caja

Las partes que componen cada caja y su orden de visualización, desde el punto de vista del usuario, son:
  1. Contenido (content): contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, una tabla, etc.).
  2. Relleno (padding): espacio libre opcional existente entre el contenido y el borde que lo encierra.
  3. Borde (border): línea que encierra completamente el contenido y su relleno.
  4. Imagen de fondo (background-image): imagen que se muestra por detrás del contenido y el espacio de relleno.
  5. Color de fondo (background-color): color que se muestra por detrás del contenido y el espacio de relleno.
  6. Margen (margin): espacio libre entre la caja y las posibles cajas adyacentes.

El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos).

Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos).

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando convenientemente cada una de estas partes se obtienen resultados muy interesantes.

Fuente:  http://librosweb.es/css/capitulo4.html

Respecto a la posición de la caja, se distinguen dos tipos de elementos XHTML:
  1. Elementos de bloque: <div>, <p>, <h1>, <form>, <ul> y <li>.
  2. Elementos de línea: <span>, <a>, <label>, <input>, <img>, <strong> y <em>.

Pero podemos cambiar su comportamiento con la siguiente declaración:

  • display: block;    cambia un elemento de línea para que se comporte como un bloque
  • display: inline;    cambia un elemento de bloque para que se comporte como uno de línea
  • display: inline-block;    hace que un elemento sea a la vez de bloque y de línea

W3C Recommendation

boxdim

Ejemplo

See the Pen Box-Model 1000px by Jesús Plaza (@3con14) on CodePen.

En Línea...

Hay 41 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

Hoy32
Ayer57
Mes1124
TOTAL48313

Miércoles, 18 Octubre 2017