El modelo de cajas – Lope González

Lope González > ESO y Bachillerato > Computación y Robótica, 1º ESO > Tema 3. Desarrollo web > El modelo de cajas

Currículo: este documento representa una parte del complemento práctico del Tema 3. Desarrollo web para Computación y Robótica de 1ºESO.

Tabla de contenidos

1. Introducción
2. Funcionamiento del modelo de cajas en herramientas no-code como Webflow
3. Añadir cajas
5. Decorando cajas
6. Organizando cajas

Como requisito previo, es necesario que tengas una cuenta de usuario registrada en la aplicación. Si no sabes cómo hacerlo, sigue estos pasos. Además, debes conocer la interfaz de usuario del programa, así que revisa esto si no tienes muy claro dónde se encuentra cada elemento de Webflow.

El «modelo de cajas» es un concepto fundamental en el diseño web que describe cómo se estructuran y visualizan los elementos HTML en una página. Este modelo es importantísimo tanto para diseñadores como para desarrolladores a la hora de crear interfaces de usuario web.

1. Introducción

Este modelo representa cada elemento HTML como un rectángulo que consta de varios componentes: el contenido (todo lo que está dentro del recuadro gris), el relleno o «padding» (zona amarilla), el borde o «border» (la franja gris) y el margen o «margin» (la zona verde). Cada uno de estas propiedades juega un papel clave en la determinación del espacio que ocupa el elemento y cómo interactúa con otros elementos que le rodean en la página (el recuadro punteado).

Por ejemplo, observa los elementos del modelo de cajas en este párrafo:

2. Funcionamiento del modelo de cajas en herramientas no-code como Webflow

Las herramientas como Webflow hacen que la manipulación del modelo de cajas sea más accesible e intuitiva. A través de interfaces gráficas, permiten a los usuarios ajustar visualmente los márgenes, bordes, relleno y dimensiones del contenido sin necesidad de escribir código CSS directamente.

En Webflow, puedes seleccionar un elemento y visualizar inmediatamente su modelo de cajas. Esto te permite ajustar las propiedades mencionadas a través de controles deslizantes y campos de entrada, proporcionando un resultado visual en tiempo real que nos permite ver cómo estos cambios afectan a los elementos de la página.

3. Añadir cajas

Vamos a ver cómo funciona esto directamente en el programa.

Pulsa sobre el + para añadir un nuevo componente, luego dirígete a la categoría Basic y luego arrastra al lienzo un componente Div Block. Este componente es un elemento muy importante del diseño web, ya que combinando estos componentes podemos hacer casi cualquier web que se nos ocurra.

Fíjate cómo, al añadir un nuevo componente al lienzo de trabajo, se ha añadido también al árbol de componentes de nuestra web:

Que esté un poco más a la derecha, debajo del Body, significa que en nuestro diseño, el Div Block está DENTRO del Body.

Ahora vamos a añadir un componente Paragraph (un párrafo de texto), dentro de ese Div Block. Lo único que tenemos que hacer es volver a darle al + y en este caso arrastrar el componente Paragraph (lo encontrarás dentro de la categoría Typography) al lienzo.

Observa el árbol de componentes:

Nuestro párrafo está a la misma altura que el Div Block, pero nosotros queremos que esté dentro del Div Block. Así que, pulsamos sobre él y lo arrastramos un poco a la derecha, hasta que quede dentro:

Si te fijas ahora sí que está dentro, y además, en el lienzo, el párrafo también aparece dentro del Div Block.

5. Decorando cajas

Lo siguiente que vamos a hacer es decorar el párrafo. Para ello, lo activamos, sólo tenemos que pulsar una vez encima (en el árbol de componentes) y nos vamos a la derecha de la pantalla, a sus propiedades.

Vamos a ponerle un borde rojo de 5 píxeles de ancho. Así que en la categoría Borders, lo ponemos así:

Ahora queremos cambiarle el color de fondo, para ponerlo amarillo. Nos vamos a sus propiedades Backgrounds y le ponemos un amarillo clarito:

Ahora, vamos a separar un poco el texto del borde de la caja, así que debemos modificar la propiedad padding, que se encuentra en la categoría Spacing. Le ponemos 25px por cada lado:

Ya tenemos la caja y su contenido como queríamos, observa el lienzo:

Ahora, vamos a crear otras dos cajas más, idénticas a esta que tenemos.

Para hacerlo, no es necesario seguir todos los pasos anteriores, simplemente podemos duplicar la caja (se duplicará también todo su contenido).

Nos vamos al árbol de componentes, pulsamos sobre el Div Block, luego hacemos click con el botón derecho del ratón y pulsamos Duplicate.

Lo volvemos a hacer otra vez, y tendremos lo que buscábamos:

Observa el lienzo, ahí tienes tres cajas con su contenido.

6. Organizando cajas

Ahora, para que veas cómo se organizan las cajas, vamos a ver distintas maneras de colocarlas.

Para que el modelo de cajas afecte a las tres cajas, tenemos que activar la caja que las contiene a todas. ¿Qué caja las contiene a todas? El Body.

Pues, activamos el Body y luego nos vamos a las propiedades, categoría Layout.

Actualmente está configurado en modo Block, pero si cambias a Flex o Grid y vas cambiando las opciones que aparecen en cada caso, verás cómo las cajas se organizan de distintas maneras: