{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
Aquest article explica el flux normal o la manera com es disposen els elements de la pàgina web si tu no en canvies la disposició.
| Prerequisits: | Conceptes bàsics d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS (consulta la Introducció al CSS). |
|---|---|
| Objectiu: | Entendre la manera com els navegadors disposen per defecte els elements en les pàgines web abans que l'usuari comenci a fer-hi canvis. |
Com es detalla en l’últim article d’introducció al disseny de pàgines web, els elements d’una pàgina web es distribueixen segons el flux normal si no s'hi aplica CSS que en canviï el comportament. Com ja hem començat a veure, pots canviar la manera com es comporten els elements, bé ajustant-ne la posició dins d’aquest flux normal, o bé suprimint-los-en del tot. Un document sòlid i ben estructurat que sigui llegible en el sentit del flux normal és la millor manera de començar qualsevol pàgina web. Garanteix que el contingut serà 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 a fer llegible un document, començar d'aquesta manera significa que treballes amb el document en lloc de lluitar-hi en contra perquè hi fas canvis d’ordre.
Abans d’aprofundir més en diferents mètodes de disseny, val la pena revisar algunes de les qüestions que has estudiat en mòduls anteriors pel que fa al flux normal dels documents.
Primer de tot s'agafa el contingut dels elements de les caixes, i a continuació s’hi afegeixen l'àrea de farciment, les vores i els marges al voltant. Es tracta del model de caixes, que ja coneixem.
De manera predeterminada, el contingut d'un element de nivell de bloc és del 100% de l'amplada de l’element pare, i l‘alçada està determinada pel contingut. Els elements de línia tenen l’amplada i l’alçada determinades pel contingut. En els elements de línia no pots establir l’amplada i l’alçada, senzillament s’inclouen dins del contingut d’elements de nivell de bloc. Si vols controlar la mida d'un element de 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;, que barreja característiques de tots dos).
Això pel que fa a elements individuals; però què passa amb la manera com interactuen els elements entre ells? El flux normal del disseny d’una pàgina web (que s’esmenta en l’article d’introducció al disseny de pàgines web) és el sistema pel qual els elements s’ubiquen dins de la finestra gràfica del navegador. Per defecte, els elements de nivell de bloc estan configurats en la direcció del flux dels blocs, en funció del mode d'escriptura de l’element pare (inicialment: en horitzontal): cada element de bloc apareix en una línia nova per sota de l’anterior i estan separats per qualsevol marge que s’hi hagi establert. Per tant, en català, o en qualsevol altre sistema d'escriptura horitzontal i de dalt a baix, els elements de nivell de bloc es disposen verticalment.
Els elements de línia es comporten de manera diferent: no es disposen en línies noves; en lloc d’això, es disposen sobre la mateixa línia que l’anterior i que qualsevol contingut textual contigu (o que el delimiti), mentre hi hagi espai dins de l’amplada de l’element pare de nivell de bloc. Quan ja no hi ha espai, el text o els elements que desborden passen a una línia nova.
Si dos elements adjacents tenen configurat un marge i els marges dels dos es toquen, predomina el que és més gran, i el més petit desapareix; es diu que els marges col·lapsen, i això també ho coneixem.
Vegem un exemple senzill que il·lustra tot això:
<h1>Flux bàsic d’un document</h1> <p>Sóc un element de nivell de bloc bàsic. Els meus elements de nivell de bloc adjacents es distribueixen en línies noves per sota meu.</p> <p>Per defecte ocupem el 100% de l'amplada de l'element pare i som tan alts com el contingut dels nostres elements fill. L‘amplada i l’alçada total són el nostre contingut + l’àrea de farciment + l’amplada/alçada de la vora.</p> <p>Tenim marges que ens separen. Però pel col·lapse dels marges, ens separa només l'amplada d'un dels dos marges, però no l’amplada dels dos.</p> <p>Els elements de línia <span> com aquest </span> i <span> aquest </span> es disposen sobre la mateixa línia que els altres i que els nodes de text adjacents, si hi ha espai en la mateixa línia. Quan els elements de línia desborden, <span>continuen per la línia següent, si és possible (com el que conté aquest text)</span>; o si no és possible, passen a una línia nova, com és el cas d’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;
}
{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}
Ara que saps com funciona el flux normal del disseny de pàgina i quines són les opcions que el navegador estableix per defecte, avança i descobreix com pots canviar aquesta visualització per defecte i crear la composició de pàgina que necessita el teu disseny de pàgina web.
{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}