08/02/2019 | Desarrollo de software,Tecnologías

Entendiendo CSS (parte 2)

¡Hola compañeros de la red! Como avanzábamos en la primera entrega de la serie de entradas sobre Cascading Style Sheets (CSS),  algunos de los conceptos CSS más importantes son el modelo de caja (box model) y el posicionamiento (positioning). Estos conceptos controlan la manera en la que los elementos se organizan y se muestran en una página y son la base de muchas técnicas de layout. De hecho, en los últimos años han surgido nuevos estándares específicamente diseñados para controlar el layout (por ejemplo, Flexbox Layout Module y Grid Layout Module).

Modelo de caja

Indica cómo se tienen que mostrar los elementos y, hasta cierto punto, cómo deben interactuar entre ellos. Todos y cada uno de los elementos de una página consisten en una caja rectangular compuesta por el contenido del elemento, el padding, el borde y el margen.

  • Content Area: el área donde aparece el contenido, como texto o imágenes.
  • Padding: es el área alrededor del contenido. Si aplicamos un fondo (un color, por ejemplo) al elemento, se extenderá bajo el contenido y, también, el padding.
  • Border: es la línea alrededor del padding. Puede ser sólida o punteada y puede tener diferentes tamaños.
  • Margen: es el área alrededor del borde. A diferencia del padding, no podemos aplicar un color de fondo al margen. Es transparente y resulta útil para controlar la distancia entre elementos en la página.

Box sizing

En CSS, por defecto, cuando hablamos del ancho y alto de un elemento (o, lo que es lo mismo, de una caja), estos se refieren al ancho y alto del contenido (content area) de ese elemento. Si modificásemos el tamaño del padding o el borde, el tamaño del contenido no cambiaría, pero sí el del elemento en global.

Podemos cambiar este comportamiento a través de la propiedad box-sizing. El valor por defecto es content-box, que describe lo que acabamos de ver. Sin embargo, podemos hacer que cuando modifiquemos los valores width y height de un elemento, se altere, como mínimo, el tamaño del contenido, particularmente útil en «responsive layouts«. Para ello, usaremos el valor border-box. Ahora, si cambiamos el ancho y el alto del elemento, estaremos cambiando el tamaño global resultado de la suma del tamaño del contenido, padding y borde.

Cuando piensas sobre esto, es como trabajar con cajas en el mundo real.

Imagina que una caja CSS es cualquier caja que usan en las fábricas para embalar algún artículo. Las paredes de la caja actúan como el borde y dan definición visual, mientras que el padding es el corcho que colocan alrededor del artículo para protegerlo de posibles golpes. Si es necesario que la caja tenga un tamaño total fijo (porque haya un espacio limitado en el camión de transporte), añadir corcho (padding) o grosor (borde) a la caja, nos obliga a que el artículo que hay dentro deba ser más pequeño para mantener el tamaño total de la caja intacto. Esto sería lo mismo que aplicar box-sizing: border-box en CSS, como podemos ver en la siguiente imagen

Por otra parte, aquí tenemos content-box. En este caso, cuando hablemos de cambiar el ancho y/o alto de la caja, nos estaremos refiriendo solo al contenido, manteniendo el padding y borde intactos, lo que fuerza al que el tamaño global de la caja, deba cambiar.

Ahora, si necesitásemos espaciar las cajas entre sí a la hora de colocarlas en el camión, el espacio entre cada caja (efectivamente, el margen), no afectará para nada al tamaño de la caja.

Un ejemplo de aplicación (ver siguiente imagen): supongamos que tenemos un «<div class=”group”></div>» (en color amarillo) el cual, visualmente, queremos dividirlo en tres partes iguales. Cada una de esas partes iguales va a estar representada por un descendiente (hijo) <div class=”block”></div> (en color azul).

Para ello le indicamos que queremos que el ancho global cada hijos sea un 33% (aproximadamente) del de su padre.
Como podemos ver en la imagen, content-box aplica el 33% al contenido de la caja, por lo que si en algún momento cambiamos el padding (y/o el borde), el tamaño global de la caja va a cambiar, dando un resultado no esperado. Sin embargo, con border-box, el tamaño 33% se refiere al tamaño global, por lo que si en algún momento cambiamos el padding (y/o el borde), el tamaño global de la caja no cambiará, obteniendo el resultado deseado.

¿Qué valor de box-size usar? Usa el box-size que te resulte más intuitivo y útil.

Valores mínimos y máximos

Permite que una caja de tipo block-level (ver en la siguiente sección) ocupe todo el ancho del padre por defecto, pero no disminuya por debajo del valor especificado en min-width o aumente por encima del valor especificado en max-width.

También existen min-height y max-height, pero la altura en CSS puede ser delicada, por lo que no entraremos en mucho detalle por ahora. Además, en muchos casos donde sea posible, es mejor dejar el cálculo de la altura al navegador.

Display

Generalmente hablando, elementos como p y h1 son referidos a veces como elementos de tipo block-level porque visualmente se muestran como bloques. Si en nuestro HTML añadiésemos cuatro p’s seguidos, y no aplicásemos ningún estilo CSS personalizado, sino que dejásemos los estilos por defecto del navegador, veríamos que se renderizarían verticalmente uno debajo del otro, como si fueran cajas apiladas.

Por el contrario, elementos como strong, span o time, son conocidos como elementos de tipo inline-level porque visualmente se renderizan como elementos en línea. Si en nuestro HTML añadiésemos cuatro span’s seguidos, y no aplicásemos ningún estilo CSS personalizado, sino que aplicásemos los valores por defecto del navegador, veremos que se renderizarían horizontalmente uno al lado del otro, como si fueran cajas alineadas.

Algunos de los valores que puede tomar la propiedad display:

  • block: el elemento se comporta como un elemento block-level. Ocupa todo el ancho de la fila, por lo que no podremos poner ningún elemento al lado suya (sí encima o debajo).
  • inline: el elemento se comporta como un elemento inline-level. Podremos poner elementos a su lado. Sin embargo, a los elementos de tipo inline-level no podremos aplicarles ni ancho ni altura.
  • inline-block: el elemento se comporta como un elemento inline-level. Podremos poner elementos a su lado. A diferencia de inline, sí podremos aplicar tanto ancho como altura.
  • none: el elemento se elimina por completo, visual y estructuralmente. No confundir con la declaración CSS visibility: hidden. En este último caso, el elemento se elimina visualmente, pero sigue estando presente estructuralmente, es decir, no veremos nada pero seguirá habiendo un espacio “en blanco”, el que ocupaba el elemento antes de ocultar su visibilidad.
  • table: el elemento se comporta como un elemento <table>.
  • table-row: el elemento se comporta como un elemento <tr>.

Puedes jugar con los diferentes valores de la propiedad display con esta herramienta de w3schools: https://www.w3schools.com/cssref/playit.asp?filename=playcss_display.

Posicionamiento (positioning)

Antes de nada, definamos qué es el document flow. El document flow es la manera en la que los elementos del documento se muestran por defecto en las especificaciones CSS.

Ahora, si nos preguntásemos: ¿cuál es la posición de cada elemento de la página según mi CSS? Para responder a esta pregunta es necesario hablar del concepto de posicionamiento y la propiedad CSS position.

Nota: por defecto, si no se cambian para nada los estilos CSS, el valor de la propiedad position es static.

Hay diferentes valores que puede tomar la propiedad position: relative, absolute, fixed y float. Vamos a ver cada uno con un ejemplo visual:

Relative positioning

El elemento mantiene el espacio original que recibió cuando fue creado. Si modificamos su posición, por ejemplo, desplazándolo unos cuantos píxeles (con left y top), se moverá, pero no liberará su espacio para que los demás elementos lo puedan usar. Como vemos en el gif, puede solapar otros elementos.

Absolute

El elemento pierde el espacio original que recibió cuando fue creado. Si modificamos su posición, por ejemplo, desplazándolo unos cuantos píxeles (con top y left), se moverá, liberando su espacio para que los demás elementos lo puedan usar. Como podemos ver en el gif, puede solapar otros elementos. Por esto último, decimos que el elemento es sacado del flujo normal del documento.
La posición de un elemento con position: absolute depende, en concreto, del primer elemento ancestro cuya propiedad position está establecida a cualquier valor que no sea static (por ejemplo, relative).

Fixed

El elemento siempre estará en la misma posición respecto al viewport (el área del navegador donde se renderiza nuestra página). Un caso común de aplicación son los headers o encabezados de algunas paǵinas webs. A medida que hacemos scroll hacia abajo, vemos que el encabezado se mantiene siempre en la misma posición, por ejemplo, en la parte superior del viewport. En el gif podemos ver un ejemplo de una página real que usa este posicionamiento para su encabezado.

Float

Puedes mover el elemento hacia la izquierda o la derecha hasta que este toca el borde de su bloque contenedor o toca cualquier otro bloque.

Cuando aplicamos float a un elemento, este se sale del document flow, igual que en posicionamiento absoluto, significando que el resto de elementos lo “ignorarán” y podrán ocupar su espacio.

Veamos algunos ejemplos.

Conclusión

Hemos aprendido sobre el modelo de caja y cómo el padding, margen, ancho y alto afectan a las dimensiones de una caja. Hemos visto también varios tipos de modelos de posicionamiento de CSS, como el flujo normal, relativo, absoluto, fixed y float. Vimos la diferencia entre cajas inline-level y block-level.

Ahora que tenemos esta base, podemos a ponerla en uso en:

  • Técnicas para estilizar las cajas que forman un documento: colores, transparencias, sombras, gradientes, bordes, etc.
  • Cómo usar el posicionamiento absoluto o relativo, en combinación con imágenes, para lograr patrones de calidad. El estándar flexbox, que nos sirve para encontrar maneras eficientes de distribuir tamaños, alinear y ordenar elementos horizontal y verticalmente.
  • Diseñar layouts pensando en filas y columnas. La especificación Grid Layout module (no soportada todavía en todos los navegadores) pasa la responsabilidad de la creación de los elementos individuales de la grid al contenedor de la grid, y solo tendremos que colocar y alinear los elementos en la posición que deseemos.
  • Diseño responsive. Adaptación a diferentes resoluciones de pantalla.
  • Transformaciones, transiciones y animaciones.
  • Uso de herramientas de desarrollo, como las Google DevTools para ayudarnos a desarrollar nuestros estilos CSS.

Algunos recursos interesantes

Esperamos que esta entrada os haya ayudado a comprender en mayor profundidad el modelo de caja y posicionamiento de CSS. ¡¡Desata tu CSS!!

Compartir en:

Relacionados