Introdución ó modelo de caixas de CSS

O modelo de caixas é a pedra angular do sistema de formateo visual de CSS. É un concepto fundamental para comprender o funcionamento das follas de estilo. Aquí veremos unha introducción básica a este modelo.

De acordo ó modelo de caixas todos os elementos dunha páxina web xeran unha caixa rectangular ó redor chamada "caixa do elemento" (as caixas de bloque e en liña trátanse de xeito lixeiramente distinto). Poden aplicarse propiedades como bordes, marxes e fondos (entre outras) á caixa dun elemento. As caixas tamén poden empregarse para posicionar elementos e deseñar a páxina.

As caixas de elementos están feitas de catro compoñentes principais. No núcleo da caixa está o contido do elemento. O contido está rodeado por certa cantidade de recheo e logo segue o borde rodeado pola marxen, tal e como se ve na seguinte imaxe:

Aquí vai una imaxe que falta

Hai unhas poucas características fundamentais do modelo de caixa que merece a pena destacar:

• Recheo, bordes e marxes son opcionais. Axustando a cero os seus valores elmínanse da caixa.
• Calqueira cor ou imaxe de fondo aplicados ó elemento extenderase por toda a área de recheo.
• Os bordes xéranse con propiedades de estilo que especifican o seu estilo (por exemplo sólido), ancho e cor. Cando un borde ten ocos, a cor ou imaxe de fondo aparece ó traveso deses ocos. É dicir, os fondos exténdense tralo borde ata o borde exterior.
• As marxes sempre son transparentes (a cor do elemento pai verase ó traveso delas). O borde exterior do elemento non é visible, pero é unha cantidade calculada.
• Cando definimos o ancho dun elemento estamos definindo o ancho da área do contido (os anchos do recheo, do borde e das marxes sumaríanse a esta cantidade).
• Pódese cambiar o estilo dos lados superior, dereito, inferior e esquerdo dunha caixa de elemento por separado.

Estas son só ideas, levarémolas a práctica pouco a pouco.