Flujo

El flujo de una página web determina el orden en que los elementos se muestran vertical y horizontalmente. Por defecto, los elementos se presentan en el orden en que aparecen en el documento HTML, de arriba hacia abajo. El flujo horizontal normalmente va de izquierda a derecha; sin embargo, el flujo también se invierte de derecha a izquierda en los idiomas que se leen de derecha a izquierda.

Cada elemento en HTML es un área rectangular que ocupa una posición en una línea, similar a las palabras en una hoja rayada. Existen dos tipos principales de elementos: elementos de bloque y elementos en línea.

Después de analizar el ejemplo, se puede concluir lo siguiente:

Elemento de nivel de bloque: ocupa todo el ancho de su contenedor, independientemente del tamaño del contenido. Los elementos de bloque se apilan uno encima del otro, de forma secuencial.

Elemento en línea: ocupa solo el ancho que requiere su contenido. Esto permite que los elementos en línea se ubiquen en la misma línea. Se ajustarán a la siguiente línea si no hay suficiente espacio en una sola línea.

Nota

La propiedad display de los elementos HTML está predefinida según los estándares y convenciones establecidos por la especificación HTML. Estos estándares determinan el comportamiento de renderizado predeterminado de los elementos en los distintos navegadores web. Puede encontrar el tipo específico de cualquier elemento en los enlaces de referencia o especificación proporcionados: HTML Reference y HTML Specification.

Tipos de elementos

Como se mencionó anteriormente, cada elemento en la hoja de estilos del navegador tiene un tipo representado por la propiedad display, que determina su comportamiento. Los dos tipos principales de elementos son los elementos de bloque y los elementos en línea, y también existen tipos adicionales, como los elementos inline-block.

Elementos en línea: utilizados principalmente para el estilo y el resaltado de pequeñas partes del contenido, como enlaces, botones e imágenes. Permanecen en la misma línea hasta que se llena el espacio, momento en el cual pasan a la siguiente línea.

Elementos de bloque: empleados para definir estructuras de contenido más grandes como encabezados, párrafos, listas y secciones (por ejemplo, cabeceras, pies de página). Se muestran visualmente como bloques rectangulares que se apilan verticalmente uno sobre otro.