Flux normal

This translation is in progress.

Aquest article explica el flux normal o la forma en què s'ordenen els elements de la pàgina web si no es canvia la disposició.

Prerequisits: Els conceptes bàsics d'HTML (mira Introducció a l'HTML), i una idea de com funciona el CSS (mirar Introducció al CSS).
Objectiu: Explicar com ordenen els navegadors per defecte les pàgines web abans que l'usuari comenci a fer canvis.

Tal com es detalla a l’últim article d’introducció al disseny, els elements d’una pàgina web es distribueixen segons el flux normal si no s'ha aplicat cap CSS per canviar el seu comportament. I, a mesura que comencem a descobrir com funciona, pots canviar com es comporten els elements ajustant la seva posició en aquest flux normal o bé suprimint-los del tot. Un document sòlid i ben estructurat que sigui llegible en flux normal és la millor manera de començar qualsevol pàgina web. Garanteix que el contingut sigui llegible, fins i tot si l’usuari fa servir un navegador molt limitat o un dispositiu com un lector de pantalla que llegeix el contingut de la pàgina. A més, com que el flux normal està dissenyat per fer un document llegible, començar d'aquesta manera significa que estàs treballant amb el document en lloc de lluitar contra ell, ja que fas canvis a la disposició.

Abans d’aprofundir més en diferents mètodes de disseny, val la pena revisar algunes de les coses que has estudiat en mòduls anteriors pel que fa al flux normal dels documents.

Com es dipositen per defecte els elements?

Primer de tot, s'agafa el contingut dels elements de les caixes i, a continuació, s’afegeix l'àrea de farciment, les vores i els marges al seu voltant. Es tracta del model de caixa que ja hem vist anteriorment.

De manera predeterminada, el contingut d'un element de nivell de bloc és del 100% de l'amplada del seu element pare i la seva alçada ve determinada pel seu contingut. Els elements en línia són tan alts i tan amplis com el seu contingut. No pots establir l'amplada ni l'alçada dels elements en línia, sinó que només s'ubiquen dins del contingut dels elements de nivell de bloc. Si vols controlar la mida d'un element en línia d'aquesta manera, has de configurar-lo perquè es comporti com un element de nivell de bloc amb display: block; (o fins i tot, display: inline-block; el qual barreja característiques de tots dos.)

Això s'aplica quan els elements es troben sols, però què passa amb com interactuen els elements entre ells? El flux de disseny normal (esmentat a l’article d’introducció al disseny) és el sistema mitjançant el qual s’ubiquen elements dins de la finestra gràfica del navegador. Per defecte, els elements de nivell de bloc estan establerts en la direcció del flux de blocs, en funció del mode d'escriptura del pare (initial: horizontal-tb): cadascun apareixerà en una nova línia per sota de la darrera i seran separats per qualsevol marge que s’estableixi. Per tant, en català, o qualsevol altra manera d'escriptura que vagi de forma horitzontal i de dalt a baix, els elements a nivell de bloc es disposen verticalment.

Els elements en línia es comporten de manera diferent: no es desglossen en línies noves; en canvi, s’asseuen a la mateixa línia que l’altre i qualsevol contingut de text contigu (o embolicat), sempre que hi hagi espai per fer-ho dins de l’amplada de l’element de nivell de bloc primari. Si no hi ha espai, el text o els elements que es desbordin passaran a una línia nova.

Si dos elements adjacents tenen el marge establert al damunt i els dos marges toquen, el més gran dels dos predomina i el més petit desapareix; això s’anomena marge que s’ensorra i també ho hem vist abans.

Vegem un exemple senzill que explica tot això:

<h1>Flux bàsic dels documents</h1>

<p>Sóc un element bàsic de nivell de bloc. Els meus elements de nivell de bloc adjacents se situen en línies noves sota meu.</p>

<p> Per defecte, ens estenem pel 100% de l'amplada de l'element principal i som tan alts com el contingut secundari. La nostra amplada i alçada total són el nostre contingut + àrea de farciment + amplada/altura de la vora. </p>

<p> Estem separats pels nostres marges. A causa del col·lapse del marge, se'ns separa per l'amplada d'un dels nostres marges, i no dels dos. </p>

<p> Els elements en línia <span> com aquest </span> i <span> aquest </span> se situen a la mateixa línia que els altres i als nodes de text adjacents, si hi ha espai a la mateixa línia. El desbordament d’elements en línia <span> s’embolcallarà en una nova línia si és possible (com aquesta que conté text)</span>; o simplement passarà a una línia nova, de la mateixa manera que farà aquesta imatge: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"> </p>
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgba(255,84,104,0.3); 
  border: 2px solid rgb(255,84,104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}

Resum

Ara que entens el flux normal i com el navegador estableix les coses per defecte, continua per entendre com canviar aquesta visualització per defecte per crear la compaginació que necessita el teu disseny.

En aquest mòdul