diff options
Diffstat (limited to 'files/ca/learn/css/css_layout/normal_flow/index.html')
| -rw-r--r-- | files/ca/learn/css/css_layout/normal_flow/index.html | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/files/ca/learn/css/css_layout/normal_flow/index.html b/files/ca/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..ac44f6a95a --- /dev/null +++ b/files/ca/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,95 @@ +--- +title: Flux normal +slug: Learn/CSS/Disseny_CSS/Flux_normal +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">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ó.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Conceptes bàsics d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de com funciona el CSS (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>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.</td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Com_es_disposen_per_defecte_els_elements">Com es disposen per defecte els elements?</h2> + +<p>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.</p> + +<p>De manera predeterminada, el contingut d'un <a href="/ca/docs/Web/HTML/Block-level_elements">element de nivell de bloc</a> és del 100% de l'amplada de l’element pare, i l‘alçada està determinada pel contingut. Els <a href="/ca/docs/Web/HTML/Elements_en_línia">elements de línia</a> 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 <code>display: block;</code> (o fins i tot, <code>display: inline-block;</code>, que barreja característiques de tots dos).</p> + +<p>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 <em>direcció del flux dels blocs</em>, en funció del <a href="/en-US/docs/Web/CSS/writing-mode">mode d'escriptura</a> de l’element pare (<em>inicialment</em>: 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.</p> + +<p>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.</p> + +<p>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.</p> + +<p>Vegem un exemple senzill que il·lustra tot això:</p> + +<div id="Normal_Flow"> +<pre class="brush: html"><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></pre> + +<pre class="brush: css">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; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p> + +<h2 id="Resum">Resum</h2> + +<p>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.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducció al disseny amb CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">El flux normal de disposició</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Graella</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotació</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionament</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disseny en diverses columnes</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">El disseny adaptatiu</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guia d’iniciació a les consultes dels mèdia</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Mètodes de disposició heretats</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilitat amb navegadors antics</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Avaluació del conjunt d’elements bàsics de compaginació</a></li> +</ul> |