Introdución

O modelo de caixas ou "box model" é seguramente a característica máis importante da linguaxe de follas de estilos CSS, xa que condiciona o deseño de todas as páxinas web.

O modelo de caixas é o comportamento de CSS que fai que todos os elementos das páxinas se representen mediante caixas rectangulares.

As caixas dunha páxina créanse automaticamente. Cada vez que se insire unha etiqueta HTML, créase unha nova caixa rectangular que encerra os contidos dese elemento. A imaxe da dereita mostra as tres caixas rectangulares que crean as tres etiquetas HTML que inclúe a páxina.

As caixas das páxinas non son visibles a simple vista porque inicialmente non mostran ningunha cor de fondo nin ningún borde.

Os navegadores crean e colocan as caixas de forma automática, pero CSS permite modificar todas as súas características. Cada unha das caixas está formada por seis partes, tal e como mostra a seguinte imaxe:

Modelo de Cajas CSS.  Jesús Plaza. CC NC-SA.

As partes que compoñen cada caixa son as seguintes:

• Contido (content): trátase do contido HTML do elemento (as palabras dun parágrafo, unha imaxe, o texto dunha lista de elementos, etc.)
• Recheo (padding): espazo libre entre o contido e o borde.
• Borde (border): liña que encerra completamente o contido e o seu recheo.
• Imaxe de fondo (background-image): imaxe que se mostra por detrás do contido e o espazo de recheo.
• Cor de fondo (background-color): cor que se mostra por detrás do contido, a imaxe de fondo e o espazo de recheo.
• Marxe (margin): separación existente entre a caixa e o resto de caixas adxacentes.

O recheo e a marxe son transparentes, polo que no espazo ocupado polo recheo se mostra a cor ou imaxe de fondo (se están definidos) e no espazo ocupado pola marxe se mostra a cor ou imaxe de fondo do seu elemento pai (se ningún elemento pai ten definida unha cor ou imaxe de fondo, móstrase a cor ou imaxe de fondo da propia páxina).

Se unha caixa define tanto unha cor coma unha imaxe de fondo, a imaxe ten máis prioridade e é a que se visualiza. Non obstante, se a imaxe de fondo non cobre totalmente a caixa do elemento ou se a imaxe ten zonas transparentes, tamén se visualiza a cor de fondo.

Combinando imaxes transparentes e cores de fondo pódense lograr efectos gráficos moi interesantes.

Procesamiento de caixas

Cando os navegadores descargan o contido HTML e CSS das páxinas web, aplican un procesamento moi complexo antes de mostrar as páxinas na pantalla do usuario. Basicamente  crean unha caixa para representar a cada elemento da páxina HTML.

Os factores que se teñen en conta para xerar cada caixa son, de xeito simple:

• As propiedades width y height que, tal e como veremos, establecen a anchura e  o alto da caixa (se están establecidas).
• O tipo de cada elemento HTML (elemento de bloque ou elemento en liña).
• Posicionamento da caixa (normal, relativo, absoluto, fixo ou flotante).

Neste capítulo móstranse os cinco tipos de posicionamentos definidos para as caixas e preséntanse outras propiedades que afectan á forma na que se visualizan.