Modelo de cajas CSS

Imprimir

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.

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.

Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características. Cada una de las cajas está formada por seis elementos:

cajas

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son:

  • Objeto de contenido: se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
  • Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
  • Borde (border): línea que encierra completamente el contenido y su relleno.
  • Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
  • Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
  • Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.

cajaEl 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.

F - Librosweb.es

Respecto a la posición de la caja, se distinguen dos tipos de elementos HTML:

  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.
aula_virtual_3con14

Utilidades

imprescindibles FireFox Google Chrome Opera Safari Acrobat Reader 7zip Flash Player Java FileHippo

Visitas...

TOTAL173676