Teoría
Teoría

Flujo del documento

El orden en que aparecen los elementos en la página se llama flujo del documento. Los elementos de bloque se muestran como áreas rectangulares, una debajo de otra. Los elementos en línea se colocan de izquierda a derecha y de arriba abajo, y pasan a la siguiente línea cuando es necesario.

Los elementos pueden anidarse unos dentro de otros. En este ejemplo, los bloques del mismo nivel se colocan de arriba abajo en el orden en que aparecen en el código.

Algunos tipos de elementos se comportan de una forma más compleja dentro del flujo. Por ejemplo, los elementos de bloque en línea pueden organizarse en varias columnas. Ya conociste estos tipos en el capítulo «Modelo de cajas».

Todo elemento que está en el flujo ocupa su propio espacio en la página y, si hace falta, separa a sus vecinos mediante márgenes.

En este capítulo estudiaremos las propiedades que cambian el comportamiento habitual de los elementos en el flujo.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Flujo del documento</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 class="outline">Flujo del documento</h1> <div class="outline">Los elementos de bloque se colocan uno debajo de otro.</div> <div class="outline"> <div class="outline">Puedes anidar bloques y organizarlos en columnas.</div> <div class="column outline">Columna 1</div> <div class="column outline">Columna 2</div> <div class="column outline">Columna 3</div> </div> <div class="outline"> <span class="outline">Los elementos en línea y el texto pasan a la</span> siguiente línea si no hay espacio suficiente.</div> </body> </html>

CSS

.outline { margin: 5px; padding: 5px; } .column { display: inline-block; }

ObjetivosRealizado

Resalta los elementos para ver cómo se forma el flujo del documento. Para hacerlo:

Asigna al elemento con la clase outline la propiedad background-color: rgba(0, 0, 0, 0.1);
y la propiedad border: 1px dotted #666666;.