MODELO de CAJAS
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.
El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.
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 tienen 6 elementos:
.: Contenido (content): 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.
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno o el margen se muestra el color o imagen de fondo (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 imágenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes.
POSICIONAMIENTO y VISUALIZACIÓN
Cuando los navegadores descargan el contenido HTML y CSS de las páginas web, aplican un procesamiento muy complejo antes de mostrar las páginas en la pantalla del usuario.
Para cumplir con el modelo de cajas presentado, los navegadores crean una caja para representar a cada elemento de la página HTML. Los factores que se tienen en cuenta para generar cada caja son:
• Las propiedades width y height de la caja (si están establecidas).
• El tipo de cada elemento HTML (elemento de bloque o elemento en línea).
• Posicionamiento de la caja (normal, relativo, absoluto o fijo).
• Las relaciones entre elementos (dónde se encuentra cada elemento, elementos descendientes, etc.)
• Otro tipo de información, como por ejemplo el tamaño de las imágenes y el tamaño de la ventana del navegador.
Veremos los cuatro tipos de posicionamientos definidos para las cajas y otras propiedades que afectan a la forma en la que se visualizan las cajas.
Tipos de elementos
El standard HTML clasifica a todos sus elementos en dos grandes grupos: elementos en línea y elementos de bloque.
Los elementos de bloque (“block elements” en inglés) siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. (div, form, h1 a h6, table, p...)
Por su parte, los elementos en línea (“inline elements” en inglés) no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos. (por ej: a, img, input, label,...)
Propiedad FLOAT
Cuando una caja se posiciona utilizando el atributo float, automáticamente se convierte en una caja flotante, lo que significa que se desplaza hasta la zona más a la izquierda o más a la derecha de la posición en la que originalmente se encontraba.
Ejemplos:
- Si se aplica la propiedad float:right a la caja 1
Las cajas flotantes influyen en la disposición de todas las demás cajas. Los elementos en línea hacen sitio a las cajas flotantes adaptando su anchura al espacio libre dejado por la caja desplazada. Los elementos de bloque no les hacen sitio, pero sí que adaptan sus contenidos para que no se solapen con las cajas flotantes.
