Tenía muchas ganas de llegar a este post porque espero que, al menos para mí, suponga un salto cualitativo en lo relativo al diseño de páginas web (y con esto no quiero decir que sean más bonitas, sino mejor hechas).
Una vez ya hemos conocido qué es la especificidad, hay otro punto que es de gran importancia para el gran puzle que supone el diseño web. Estoy hablando del modelo de formato visual y del modelo de caja.
MODELO DE FORMATO VISUAL
El modelo de formato visual (visual formatting model) es cómo los navegadores muestran por pantalla los documentos que realizamos.
El modelo de formato visual organiza todos los elementos de nuestra página en bloques de contenido o cajas, que se reparten el espacio de la página. Por caja entendemos un “espacio rectangular delimitado”, es decir, cualquier página siempre se organiza en torno a cajas (y da igual lo compleja que sea y los millones de bordes redondeados que tenga, al final todo son cajas).
Por ejemplo, una página como la siguiente generará los siguientes bloques:
<body>
<div>
<div>
<p>
<span>panicoenlaxbox.com</span>
</p>
</div>
</div>
</body>
· Bloque body
· Bloque div
· Bloque div
· Bloque p
· Bloque span
Podemos ayudarnos del complemento “Web Developer” de Firefox para resaltar todos los elementos del documento y así observar que, efectivamente, el modelo de formato visual divide el espacio en cajas que a su vez contienen otras cajas (otra opción sería activar el borde de todos los elementos, * { border: black solid 1px }, pero no parece muy operativo…)
A mí me recuerdo al juego de las muñecas rusas, Matrioska.
Cuando una caja de bloque contiene otros elementos se genera lo que se denomina un bloque de contención (más adelante veremos que es una caja de bloque).
Esto es importante puesto que el tamaño y posición de una caja (sin importar su tipo) se calcula respecto al bloque de contención que la contiene.
Por ejemplo, el anterior código podemos modificarlo para que la primera capa tenga un ancho del 50% y la segunda también tenga un ancho del 50%. Veamos que ocurre:
La primera capa ha tomado el 50% del ancho del bloque de contención en el que se halla (en nuestro caso, body), mientras que la segunda capa ha tomado el 50% del bloque de contención en el que se halla (que ahora ya no es body, sino la primera capa). Es decir, hay ciertos valores como la posición, valores relativos (por ejemplo, la anchura expresada en %), etc. que computan respecto al valor computado de su padre.
Algunas reglas respecto a los bloques de contención son:
· La raíz del documento (body) siempre generará una primera caja llamada bloque de contención inicial.
· El ancho de este primer bloque de contención inicial se puede modificar a través de la propiedad width, pero en caso de no hacerse tomará el ancho de la ventana del navegador (que podría redimensionarse y por ende cambiar automáticamente).
· En caso de no especificarse, los bloques de contención adaptarán su alto a su contenido (incluso el bloque de contención inicial, que no se ajustará al alto de la ventana sino al alto de su contenido).
· Si los elementos dentro de un bloque de contención exceden los límites (alto o ancho) de este bloque se produce un desbordamiento en el bloque de contención. Se puede tratar este desbordamiento a través de la propiedad overflow. Podremos ocultar el exceso de contenido, suministrar barras de desplazamiento o informar al bloque de contención que crezca para ajustarse a su contenido.
Ahora que ya sabemos que un navegador sólo entiende de cajas, ha llegado la hora de entrar en el detalle de cómo son, de qué tipo y cómo se comportan estas cajas en distintas situaciones.
El tipo de una caja es esencial. A través del tipo, una caja se posicionará en el flujo del documento de una forma u otra, y también delimitará qué propiedades CSS se pueden aplicar con éxito al elemento.
El tipo de una caja se controla a través de la propiedad display (creo que voy a llorar porque hasta ahora yo pensaba que display sólo servía para mostrar u ocultar elementos).
A groso modo, el valor establecido en la propiedad display dará lugar a 2 tipos de cajas: Cajas de bloque y cajas en línea.
· Cajas de bloque
o Puede contener otras cajas de bloque, en línea o contenido (texto).
o Están pensadas para contener otros elementos.
o Generan un bloque de contención.
o Generan una nueva línea. Esto es que las cajas de bloque siempre empiezan en una nueva línea y que además el siguiente elemente que insertemos aparecerá en la siguiente línea más allá del borde inferior de la caja.
o Si no tienen establecido un ancho, toman el ancho de su bloque de contención padre.
· Cajas en línea
o Sólo puede contener otras cajas en línea o contenido (texto).
o Están pensadas para mostrar y formatear texto.
o NO generan un bloque de contención.
o NO generan una nueva línea.
o Tomarán sólo el ancho requerido por su contenido.
o Si el contenido de un bloque en línea excede el tamaño de la propia línea se generará otra caja. Por eso se dice que un elemento con la propiedad display: inline genera 1 o más bloques de línea.
A grandes rasgos, el valor block para la propiedad display crea una caja de bloque e inline crea una caja en línea. También es muy interesante el valor inline-block que hace que la caja se comporte como un bloque de contención pero sin generar una nueva línea. Hay mucho más, pero escapan del ámbito de este post.
Todas las etiquetas HTML tienen un valor predeterminado para la propiedad display, por ejemplo:
| Block | Inline |
| BODY DIV P UL LI H1, H2, … FORM FIELDSET LEGEND TABLE TD IFRAME … | A SPAN BR EM IMG INPUT STRONG TEXTAREA … |
Para una lista completa de elementos en bloque, visita el siguiente enlace.
Para una lista completa de elementos en línea, visita el siguiente enlace.
| El valor inicial de la propiedad display no significa que no podamos cambiar el tipo de caja de un elemento. Por ejemplo, bien podríamos tener un DIV con display: inline para que fuera tratado como un elemento en línea, o un enlace A con display: block para tratarlo como un elemento de bloque. A este respecto, no hay que confundir el tipo de caja que genera el elemento con la validación del documento, es decir, aunque un elemento de tipo A sea un elemento de bloque (porque hayamos especificado display: block), igualmente no podrá contener un elemento de tipo DIV (porque no pasaría la validación según el DOCTYPE y DTD asociado). |
La idea principal de todo lo visto hasta ahora es que el diseño web deberíamos plantearlo como un diseño de cajas.
Además de los 2 tipos de cajas visto anteriormente (bloque o en línea) hay un tercer tipo que es el “tipo anónimo”. Este tipo de caja se crea “automáticamente” para permitir que el flujo de la página no se vea alterado. Estas cajas “anónimas” pueden ser del tipo bloque o en línea. Sobre estas cajas no tenemos control porque no tienen un elemento asociado declarado (se crearon “al vuelo”).
El ejemplo más claro de caja anónima es cuando en una de caja de bloque insertamos texto que no está contenido en una caja. En este caso, el texto produciría un conflicto por el que el resto de cajas de ese bloque no tendrían una referencia sobre la que situarse. Veamos un ejemplo:
<div>
Este texto crea una caja anónima de bloque porque sino P no tendría una referencia sobre dónde situarse. Es de bloque porque ha sido "creada" para P, que es un elemento de bloque.
<p>Texto dentro de caja, sin problemas</p>
</div>
<div>
Este texto crea una caja anónima en línea porque sino SPAN no tendría una referencia sobre dónde situarse. Es de línea porque ha sido "creada" para SPAN, que es un elemento de línea.
<span>En línea</span>
</div>
MODELO DE CAJA
Ahora que ya sabemos que el navegador distribuye en pantalla los elementos de nuestra página siempre generando una caja por cada elemento, es momento de estudiar como manipular estas cajas y cuál es el formato que las define. Estamos hablando del modelo de caja (box model).
Las propiedades más relevantes de una caja son:
· Margen (margin)
· Borde (border)
· Relleno (padding)
· Ancho (width)
o No incluye el margen ni el borde, sólo el contenido.
o Sólo se aplica a cajas de bloque.
o Si el ancho está definido, el exceso de contenido se tratará con overflow.
· Alto (height)
o No incluye el margen ni el borde, sólo el contenido.
o Sólo se aplica a cajas de bloque.
o Si el alto está definido, el exceso de contenido se tratará con overflow.
· Posicionamiento (position)
o Estático (static, posicionamiento por defecto), absoluto (absolute), relativo (relative) o fijo (fixed).
· Imagen de fondo (background-image).
· Color de fondo (background-color).
Respecto al margen, cabe mencionar que es siempre transparente y tomará el color o imagen de fondo de su elemento padre o contenedor (en caso de no tener ninguno, será body).
El modelo de caja puede ser fácilmente visualizado a través de cualquiera de las herramientas de desarrollo integradas en los navegadores.
De todas las características del modelo de caja, una de las más interesantes y que su vez supone mayor reto entender y utilizar es el posicionamiento. Por ello, el posicionamiento lo trataremos en un siguiente post que explicará todas sus posibilidades. Ya puedes visitar el post de posicionamiento en CSS.
Un saludo!
No hay comentarios:
Publicar un comentario