Metodos de session

El modelo de caja
Por benko el 08 de Septiembre de 2008 con 20.943 visitas.
  Otros artículos y tutoriales por benko.
No consumo drogas, mis sueños ya son lo suficientemente escalofriantes
M.C. Escher, artista
Es hora de conocer uno de los fundamentos más importantes del CSS: el modelo de caja (box model). Es muy fácil, pero entenderlo bien es vital para poder realizar una buenamaquetación de la web.
¿Cómo es el modelo de caja?
En realidad, todos los elementos de una web (párrafos, 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.
Hay dos tipos de cajas: block e inline. Los elementos block rompen el flujo de maquetación. Esto es, aparecen solos, insertando “saltosde línea”. Los elementos inline siguen el flujo, y están contenidos dentro de elementos de bloque.
Por ejemplo, un párrafo sería un elemento block (no podemos tener un párrafo al lado del otro, sino que dos párrafos seguidos aparecerán uno abajo del otro. En cambio, un enlace es un elemento inline, ya que no “corta” el texto donde está metido.
Estas dos diferencias son importantes, pero hay quetener en mente que ambos tipos comparten el modelo de caja, que es el que aparece en la figura 1.

Figura 1 - Modelo de Caja
Las propiedades más importantes de una caja son: width (ancho), height (alto), padding (relleno), border (borde) y margin (margen).
Ancho y alto
La propiedad width es un poco confusa, y durante mucho tiempo era horroroso trabajar con ella debido a que Ya-Sabes-Quién nola implementaba correctamente. Afortunadamente, desde la versión 6 del IE, width funciona como debería, así que es un quebradero de cabeza menos.
-------------------------------------------------
Lo que ha dado lugar a competiciones de a ver quién conseguía el chanchullo más bonito para sortear el bug. Si estás interesado, googlea buscando “box model hack”.
A lo que íbamos, width representa elancho de la caja. Pero es el ancho interior, es decir, si bordes, márgenes, ni padding. Podemos indicar este ancho en medidas absolutas (normalmente píxeles) o relativas (normalmente %).
Aunque los elementos inline tienen width, si la modificamos con CSS no veremos ningún resultado visual. Esto es porque el ancho de estos elementos se establece automáticamente para que se ajuste a las dimensionesdel elemento inline. Por ejemplo, si tenemos un enlace que consiste en un texto de cinco caracteres, el ancho (width) de este elemento será lo que ocupen esos cinco caracteres.
Sobre el alto de la caja, se controla con la propiedad height, y todo lo que hemos dicho antes sobre el ancho, también se aplica aquí.
Padding
Con padding establecemos la distancia de “relleno” entre el límite interiorde la caja y el exterior (borde). Es una definición muy mala, pero se entiende a la perfección en el dibujito.
Si queremos poner un padding de 20 píxeles para toda la caja, lo haríamos así:
-------------------------------------------------
padding : 20 px;
Podemos establecer un padding distinto para cada lado, usando los sufijos -top (superior), -bottom (inferior), left(izquierda) y right (derecha):
-------------------------------------------------
padding-top: 10px;
-------------------------------------------------
padding-bottom: 5px;
-------------------------------------------------
padding-left: 30px;
-------------------------------------------------
padding-right: 20px;
Podemos abreviar loanterior en una sola línea, indicando primero el padding superior y luego siguiendo el orden de las agujas del reloj. Es decir, nos quedaría: arriba, derecha, abajo, izquierda. El ejemplo anterior se acortaría así:
-------------------------------------------------
padding: 10px 20px 5px 30px;
Otro atajo útil es especificar sólo dos medidas: una corresponderían al padding...