033.4 Lección 1

Certificación:

Conceptos básicos de desarrollo web

Versión:

1.0

Tema:

033 Estilo de contenido CSS

Objetivo:

033.4 Modelo y diseño CSS

Lección:

1 de 1

Introducción

Cada elemento visible en un documento HTML se representa como un cuadro rectangular. Por lo tanto, el término box model describe el enfoque que adopta CSS para modificar las propiedades visuales de los elementos. Al igual que las cajas de diferentes tamaños, los elementos HTML se pueden anidar dentro de los elementos container, generalmente el elemento div, para que puedan separarse en secciones.

Podemos utilizar CSS para modificar la posición de los cuadros, desde pequeños ajustes hasta cambios drásticos en la disposición de los elementos en la página. Además del flujo normal, la posición de cada cuadro puede basarse en los elementos que lo rodean, ya sea su relación con su contenedor principal o su relación con el viewport, que es el área de la página visible para el usuario. Ningún mecanismo cumple todos los requisitos de diseño posibles, por lo que es posible que necesite una combinación de ellos.

Flujo Normal

La forma predeterminada en que el navegador representa el árbol del documento se denomina normal flow (flujo normal). Los rectángulos correspondientes a los elementos se colocan más o menos en el mismo orden en que aparecen en el árbol del documento, en relación con sus elementos principales. No obstante, dependiendo del tipo de elemento, la casilla correspondiente puede seguir distintas reglas de posicionamiento.

Una buena forma de entender la lógica del flujo normal es hacer visibles las cajas. Podemos comenzar con una página muy básica, con solo tres elementos div separados, cada uno con un párrafo con texto aleatorio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS Box Model and Layout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="first">
  <h2>First div</h2>
  <p><span>Sed</span> <span>eget</span> <span>velit</span>
  <span>id</span> <span>ante</span> <span>tempus</span>
  <span>porta</span> <span>pulvinar</span> <span>et</span>
  <span>ex.</span></p>
</div><!-- #first -->

<div id="second">
  <h2>Second div</h2>
  <p><span>Fusce</span> <span>vitae</span> <span>vehicula</span>
  <span>neque.</span> <span>Etiam</span> <span>maximus</span>
  <span>vulputate</span> <span>neque</span> <span>eu</span>
  <span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span>
  <span>felis</span> <span>eget</span> <span>eleifend</span>
  <span>aliquam,</span> <span>dui</span> <span>dolor</span>
  <span>bibendum</span> <span>leo.</span></p>
</div><!-- #second -->

<div id="third">
  <h2>Third div</h2>
  <p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span>
  <span>elementum.</span> <span>Morbi</span> <span>vulputate</span>
  <span>pretium</span> <span>arcu,</span> <span>sed</span>
  <span>faucibus.</span></p>
</div><!-- #third -->

</body>
</html>

Cada palabra está en un elemento span, por lo que podemos diseñar las palabras y ver cómo se tratan también como cuadros. Para que los cuadros sean visibles, debemos editar el archivo de hoja de estilos style.css al que hace referencia el documento HTML. Las siguientes reglas harán lo que necesitemos:

* {
  font-family: sans;
  font-size: 14pt;
}

div {
  border: 2px solid #00000044;
}

#first {
  background-color: #c4a000ff;
}

#second {
  background-color: #4e9a06ff;
}

#third {
  background-color: #5c3566da;
}

h2 {
  background-color: #ffffff66;
}

p {
  background-color: #ffffff66;
}

span {
  background-color: #ffffffaa;
}

El resultado aparece en Figure 1.

Figure 1. El flujo básico de elementos es de arriba a abajo y de izquierda a derecha.

Figure 1 muestra que cada etiqueta HTML tiene un cuadro correspondiente en el diseño. Los elementos div, h2 y p se extienden hasta el ancho de su elemento principal. Por ejemplo, el elemento principal de los elementos div es body, por lo que se extienden hasta el ancho del cuerpo, mientras que el elemento principal de cada elemento h2 y p es su div correspondiente. Los cuadros que se extienden hasta el ancho de su elemento padre se denominan elementos block. Algunas de las etiquetas HTML más comunes representadas como bloques son h1, h2, h3, p, ul, ol, table, li, div, section , form y aside. Los elementos en bloque hermanos (elementos en bloque que comparten el mismo elemento padre inmediato) se apilan dentro de su padre de arriba a abajo.

Note

Algunos elementos en bloque no están destinados a ser utilizados como contenedores para otros elementos de bloque. Es posible, por ejemplo, insertar un elemento en bloque dentro de un elemento h1 o p, pero no se considera una buena práctica. Más bien, el diseñador debe usar una etiqueta apropiada como contenedor. Las etiquetas de contenedor comunes son div, section y aside.

Además del texto en sí, elementos como h1, p y li solo esperan elementos inline como elementos secundarios. Como la mayoría de las escrituras occidentales, los elementos en línea siguen el flujo de texto de izquierda a derecha. Cuando no queda espacio en el lado derecho, el flujo de elementos en línea continúa en la siguiente línea, como el texto. Algunas etiquetas HTML comunes tratadas como cuadros en línea son span, a, em, strong, img, input y label.

En nuestra página HTML de muestra, cada palabra dentro de los párrafos estaba rodeada por una etiqueta span, por lo que podían resaltarse con la regla CSS correspondiente. Como se muestra en la imagen, cada elemento span se coloca horizontalmente, de izquierda a derecha, hasta que no haya más espacio en el elemento principal.

La altura del elemento depende de su contenido, por lo que el navegador ajusta la altura de un elemento contenedor para acomodar sus elementos de bloque anidados o líneas de elementos en línea. Sin embargo, algunas propiedades de CSS afectan la forma de un cuadro, su posición y la ubicación de sus elementos internos.

Las propiedades margin y padding afectan a todos los tipos de box (cajas). Si no establece estas propiedades explícitamente, el navegador establece algunas de ellas utilizando valores estándares. Como se ve en [img-fig01], los elementos h2 y p se renderizaron con un espacio entre ellos. Estos espacios son los márgenes superior e inferior que el navegador agrega a estos elementos de forma predeterminada. Podemos eliminarlos modificando las reglas CSS para los selectores h2 y p:

h2 {
  background-color: #ffffff66;
  margin: 0;
}

p {
  background-color: #ffffff66;
  margin: 0;
}

El resultado aparece en Figure 2.

Figure 2. La propiedad margin puede cambiar o eliminar los márgenes de los elementos.

El elemento body también, por defecto, tiene un pequeño margen que crea un espacio alrededor. Este espacio también se puede eliminar utilizando la propiedad margin.

Mientras que la propiedad margin define el espacio entre el elemento y su entorno, la propiedad padding del elemento define el espacio interno entre los límites del contenedor y sus elementos secundarios. Considere los elementos h2 y p dentro de cada div en el código de muestra, por ejemplo. Podríamos usar su propiedad margin para crear un espacio en los bordes del div correspondiente, pero es más simple cambiar la propiedad padding del contenedor:

#second {
  background-color: #4e9a06ff;
  padding: 1em;
}

Solo se modificó la regla para el segundo div, por lo que los resultados (Figure 3) muestran la diferencia entre el segundo div y los otros contenedores div.

Figure 3. Los diferentes contenedores div pueden tener diferentes paddings.

La propiedad margin es una forma abreviada de cuatro propiedades que controlan los cuatro lados del cuadro: margin-top, margin-right, margin-bottom y margin-left. Cuando a margin se le asigna un valor único, como en los ejemplos hasta ahora, los cuatro márgenes del cuadro lo usan. Cuando se escriben dos valores, el primero define los márgenes superior e inferior, mientras que el segundo define los márgenes derecho e izquierdo. El uso de margin: 1em 2em, por ejemplo, define un espacio de 1 em para los márgenes superior e inferior y un espacio de 2 em para los márgenes derecho e izquierdo. Escribir cuatro valores establece los márgenes de los cuatro lados en el sentido de las agujas del reloj, comenzando por la parte superior. No es necesario que los diferentes valores de la propiedad abreviada utilicen las mismas unidades.

La propiedad padding también es una forma abreviada, siguiendo los mismos principios que la propiedad margin.

En su comportamiento predeterminado, los elementos en bloque se estiran para ajustarse al ancho disponible. Pero esto no es obligatorio. La propiedad width puede establecer un tamaño horizontal fijo:

#first {
  background-color: #c4a000ff;
  width: 6em;
}

La adición de width: 6em a la regla CSS encoge el primer div horizontalmente, dejando un espacio en blanco en su lado derecho (Figure 4).

Figure 4. La propiedad width cambia el ancho horizontal del primer div.

En lugar de dejar el primer div alineado a la izquierda, es posible que queramos centrarlo. Centrar un cuadro es equivalente a establecer márgenes del mismo tamaño en ambos lados, por lo que podemos usar la propiedad margin para centrarlo. El tamaño del espacio disponible puede variar, por lo que usamos el valor auto en los márgenes izquierdo y derecho:

#first {
  background-color: #c4a000ff;
  width: 6em;
  margin: 0 auto;
}

Los márgenes izquierdo y derecho son calculados automáticamente por el navegador y el cuadro se centrará (Figure 5).

Figure 5. La propiedad margin se usa para centrar el primer div.

Como se muestra, hacer un elemento en bloque más estrecho no hace que el espacio restante esté disponible para el siguiente elemento. El flujo natural aún se conserva, como si el elemento más estrecho aún ocupara todo el ancho disponible.

Personalización del flujo normal

El flujo normal es simple y secuencial. CSS también le permite romper el flujo normal y colocar elementos de formas muy específicas, incluso anulando el desplazamiento de la página si lo desea. Veremos varias formas de controlar la posición de los elementos en esta sección.

Elementos flotantes

Es posible hacer que los elementos de bloques hermanos compartan el mismo espacio horizontal. Una forma de hacerlo es a través de la propiedad float, que elimina el elemento del flujo normal. Como sugiere su nombre, la propiedad float hace que la caja flote sobre los elementos del bloque que vienen después, por lo que se renderizarán como si estuvieran debajo de la caja flotante. Para hacer que el primer div flote a la derecha, agregue float: right a la regla CSS correspondiente:

#first {
  background-color: #c4a000ff;
  width: 6em;
  float: right;
}

Los márgenes automáticos se ignoran en un cuadro flotante, por lo que la propiedad margin se puede eliminar. Figure 6 muestra el resultado de cómo el primer div a la derecha.

Figure 6. El primer div está flotando y no forma parte del flujo normal.

De forma predeterminada, todos los elementos en bloque que vienen después del elemento flotante irán debajo de él. Por lo tanto, dada la altura suficiente, la caja flotante cubrirá todos los elementos restantes del bloque.

Aunque un elemento flotante va por encima de otros elementos en bloque, el contenido en línea dentro del contenedor del elemento flotante se envuelve alrededor del elemento flotante. La inspiración para esto proviene de los diseños de revistas y periódicos, que a menudo envuelven el texto alrededor de una imagen, por ejemplo.

La imagen anterior muestra cómo el primer div cubre el segundo div y parte del tercer div. Supongamos que queremos que el primer div flote sobre el segundo div, pero no el tercero. La solución es incluir la propiedad clear en la regla CSS correspondiente al tercer div:

#third {
  background-color: #5c3566da;
  clear: right;
}

Establecer la propiedad clear en right hace que el elemento correspondiente omita cualquier elemento anterior flotando a la derecha, reanudando el flujo normal (Figure 7).

Figure 7. La propiedad clear vuelve al flujo normal.

Del mismo modo, si un elemento anterior flotaba hacia la izquierda, puede usar clear: left para reanudar el flujo normal. Cuando tenga que omitir elementos flotantes tanto a la izquierda como a la derecha, use clear: both.

Cajas de posicionamiento

En el flujo normal, cada cuadro va después de los cuadros que le preceden en el árbol de documentos. Los elementos hermanos anteriores “empujan” los elementos que vienen después de ellos, moviéndolos hacia la derecha y hacia abajo dentro de su elemento padre. El elemento padre puede tener sus propios hermanos haciéndole lo mismo. Es como colocar azulejos uno al lado del otro en una pared, comenzando por la parte superior.

Este método de colocar las cajas se llama static, y es el valor predeterminado para la propiedad CSS position. Aparte de definir márgenes y relleno, no hay forma de reposicionar un cuadro estático en la página.

Al igual que los azulejos en la analogía de la pared, la colocación estática no es obligatoria. Al igual que con los mosaicos, puede colocar las cajas en cualquier lugar que desee, incluso cubriendo otras cajas. Para hacerlo, asigne la propiedad position uno de los siguientes valores:

relative: El elemento sigue el flujo normal del documento, pero puede usar las propiedades top, right, bottom y left para establecer desplazamientos relativos a su posición estática original. Las compensaciones también pueden ser negativas. Los otros elementos permanecen en sus lugares originales, como si el elemento relativo aún fuera estático.
absolute: El elemento ignora el flujo normal de los otros elementos y se posiciona en la página por las propiedades top, right, bottom e left. Sus valores son relativos al cuerpo del documento o a un contenedor principal no estático.
fixed: El elemento ignora el flujo normal de los otros elementos y se posiciona por las propiedades top, right, bottom y left. Sus valores son relativos a la ventana gráfica (es decir, el área de la pantalla donde se muestra el documento). Los elementos fijos no se mueven cuando el visitante se desplaza por el documento, sino que se asemejan a una pegatina fijada en la pantalla.
sticky: El elemento sigue el flujo normal del documento. Sin embargo, en lugar de salir de la ventana gráfica cuando el documento se desplaza, se detendrá en la posición establecida por las propiedades top, right, bottom y left. Si el valor de top es 10px, por ejemplo, el elemento dejará de desplazarse por debajo de la parte superior de la ventana gráfica cuando alcance los 10 píxeles del límite superior de la ventana gráfica. Cuando eso sucede, el resto de la página continúa desplazándose, pero el elemento fijo se comporta como un elemento fijo en esa posición. Volverá a su posición original cuando el documento vuelva a su posición en la ventana gráfica. Los elementos de este tipo se usan comúnmente hoy en día para crear menús superiores que siempre estén visibles.

Las posiciones que pueden usar las propiedades top, right, bottom y left no son necesarias para usarlas todas. Si establece las propiedades top y height de un elemento absoluto, por ejemplo, el navegador calcula implícitamente su propiedad bottom (top + height = bottom).

La propiedad `display`

Si el orden dado por el flujo normal no es un problema en su diseño, pero desea cambiar la forma en que los cuadros se alinean en la página, modifique la propiedad display del elemento. La propiedad display puede incluso hacer que el elemento desaparezca por completo del documento renderizado, configurando display: none. Esto es útil cuando desea mostrar el elemento más tarde usando JavaScript.

La propiedad display también puede, por ejemplo, hacer que un elemento de bloque se comporte como un elemento en línea (display: inline). Sin embargo, hacerlo no se considera una buena práctica. Existen mejores métodos para colocar elementos contenedores uno al lado del otro, como el flexbox model.

El modelo flexbox se inventó para superar las limitaciones del uso de la propiedad float y eliminar el uso inadecuado de tablas para estructurar el diseño de la página. Cuando establece la propiedad display de un elemento contenedor en flex para convertirlo en un contenedor flexbox, sus hijos inmediatos se comportarán más o menos como celdas en una fila de la tabla.

Tip	Si desea tener aún más control sobre la ubicación de los elementos en la página, eche un vistazo a la función CSS grid. La cuadrícula es un poderoso sistema basado en filas y columnas para crear diseños elaborados.

Para probar flexbox, agregue un nuevo elemento div a la página de ejemplo y conviértalo en el contenedor de los tres elementos div existentes:

<div id="container">

<div id="first">
  <h2>First div</h2>
  <p><span>Sed</span> <span>eget</span> <span>velit</span>
  <span>id</span> <span>ante</span> <span>tempus</span>
  <span>porta</span> <span>pulvinar</span> <span>et</span>
  <span>ex.</span></p>
</div><!-- #first -->

<div id="second">
  <h2>Second div</h2>
  <p><span>Fusce</span> <span>vitae</span> <span>vehicula</span>
  <span>neque.</span> <span>Etiam</span> <span>maximus</span>
  <span>vulputate</span> <span>neque</span> <span>eu</span>
  <span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span>
  <span>felis</span> <span>eget</span> <span>eleifend</span>
  <span>aliquam,</span> <span>dui</span> <span>dolor</span>
  <span>bibendum</span> <span>leo.</span></p>
</div><!-- #second -->

<div id="third">
  <h2>Third div</h2>
  <p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span>
  <span>elementum.</span> <span>Morbi</span> <span>vulputate</span>
  <span>pretium</span> <span>arcu,</span> <span>sed</span>
  <span>faucibus.</span></p>
</div><!-- #third -->


</div><!-- #container -->

Agregue la siguiente regla CSS a la hoja de estilo para convertir el contenedor div en un contenedor flexbox:

#container {
  display: flex;
}

El resultado son los tres elementos div internos representados uno al lado del otro (Figure 8).

Figure 8. El modelo flexbox crea una cuadrícula.

Usar el valor inline-flex en lugar de flex tiene básicamente el mismo resultado, pero hace que los hijos se comporten más como elementos en línea.

Diseño Responsivo

Sabemos que CSS proporciona propiedades que ajustan el tamaño de los elementos y las fuentes en relación con el área de pantalla disponible. Sin embargo, es posible que desee ir más allá y utilizar un diseño diferente para diferentes dispositivos: por ejemplo, sistemas de escritorio frente a dispositivos con dimensiones de pantalla inferiores a un determinado tamaño. Este enfoque se llama diseño web responsivo, y CSS proporciona métodos llamados consultas de medios para hacerlo posible.

En el ejemplo anterior, modificamos el diseño de la página para colocar los elementos div uno al lado del otro en columnas. Ese diseño es adecuado para pantallas más grandes, pero estará demasiado abarrotado en pantallas más pequeñas. Para resolver este problema, podemos agregar una consulta de medios a la hoja de estilos que coincida solo con pantallas con al menos 600px de ancho:

@media (min-width: 600px){
  #container {
    display: flex;
  }
}

Las reglas CSS dentro de la directiva @media se usarán solo si se cumplen los criterios entre paréntesis. En este ejemplo, si el ancho de la ventana gráfica es menor que 600px, la regla no se aplicará al contenedor div y sus elementos secundarios se representarán como elementos div convencionales. El navegador reevalúa las consultas de medios cada vez que cambia las dimensiones de la ventana gráfica, por lo que el diseño se puede cambiar en tiempo real mientras se cambia el tamaño de la ventana del navegador o se gira el teléfono inteligente.

Ejercicios guiados

Si la propiedad position no se modifica, ¿qué método de posicionamiento utilizará el navegador?
¿Cómo puede asegurarse de que la caja de un elemento se renderizará después de cualquier elemento flotante anteriormente?
¿Cómo se puede utilizar la propiedad abreviada margin para establecer los márgenes superior/inferior en 4px y los márgenes derecho/izquierdo en 6em?
¿Cómo se puede centrar horizontalmente un elemento contenedor estático con ancho fijo en la página?

Ejercicios de exploración

Escriba una regla CSS que coincida con el elemento <div class="picture"> para que el texto dentro de sus siguientes elementos de bloque se asiente hacia su lado derecho.
¿Cómo afecta la propiedad top a un elemento estático en relación con su elemento padre?
¿Cómo afecta el cambio de la propiedad display de un elemento a flex su ubicación en el flujo normal?
¿Qué función de CSS le permite utilizar un conjunto de reglas independiente en función de las dimensiones de la pantalla?

Resumen

Esta lección cubre el modelo de caja CSS y cómo podemos personalizarlo. Además del flujo normal del documento, el diseñador puede hacer uso de diferentes mecanismos de posicionamiento para implementar un diseño personalizado. La lección abarca los siguientes conceptos y procedimientos:

El flujo normal del documento.
Ajustes al margen y relleno de la caja de un elemento.
Uso de las propiedades flotantes y transparentes.
Mecanismos de posicionamiento: estático, relativo, absoluto, fijo y pegajoso.
Valores alternativos para la propiedad display.
Conceptos básicos de diseño receptivo.

Respuestas a los ejercicios guiados

Si la propiedad position no se modifica, ¿qué método de posicionamiento utilizará el navegador?

El método static.
¿Cómo puede asegurarse de que la caja de un elemento se renderizará después de cualquier elemento flotante anteriormente?

La propiedad clear del elemento debe establecerse en both.
¿Cómo se puede utilizar la propiedad abreviada margin para establecer los márgenes superior/inferior en 4px y los márgenes derecho/izquierdo en 6em?

Puede ser margin: 4px 6em o margin: 4px 6em 4px 6em.
¿Cómo se puede centrar horizontalmente un elemento contenedor estático con ancho fijo en la página?

Usando el valor auto en sus propiedades margin-left y margin-right.

Respuestas a los ejercicios de exploración

Escriba una regla CSS que coincida con el elemento <div class="picture"> para que el texto dentro de sus siguientes elementos de bloque se asiente hacia su lado derecho.

.picture { float: left; }
¿Cómo afecta la propiedad top a un elemento estático en relación con su elemento padre?

La propiedad top no se aplica a los elementos estáticos.
¿Cómo afecta el cambio de la propiedad display de un elemento a flex su ubicación en el flujo normal?

La ubicación del elemento en sí no cambia, pero sus elementos secundarios inmediatos se mostrarán uno al lado del otro de forma horizontal.
¿Qué función de CSS le permite utilizar un conjunto de reglas independiente en función de las dimensiones de la pantalla?

Las consultas de medios (Media queries) permiten que el navegador verifique las dimensiones de la ventana gráfica antes de aplicar una regla CSS.