unslug ca: move

1 files changed, 129 insertions, 0 deletions

diff --git a/files/ca/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ca/learn/css/building_blocks/sizing_items_in_css/index.html
new file mode 100644
index 0000000000..5ff34b8d93
--- /dev/null
+++ b/files/ca/learn/css/building_blocks/sizing_items_in_css/index.html
@@ -0,0 +1,129 @@
+---
+title: Dimensionar elements en CSS
+slug: Learn/CSS/Building_blocks/Dimensionar_elements_en_CSS
+translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
+
+<p>En els articles que hem vist fins ara has descobert diverses maneres de dimensionar els elements d'una pàgina web amb CSS. És important entendre la importància de les diferents característiques dels elements del teu disseny, i en aquest article resumim les maneres com assignar una mida als elements amb CSS i definim uns quants termes relatius al dimensionament que t'ajudaran en el futur.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisits:</th>
+   <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectiu:</th>
+   <td>Entendre les diferents maneres com podem assignar mides als elements amb CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="La_mida_natural_o_intrínseca_de_les_coses">La mida natural o intrínseca de les coses</h2>
+
+<p>Els elements HTML tenen una mida natural predeterminada abans que els afecti cap codi CSS. Un exemple senzill n’és una imatge. Una imatge té una amplada i una alçada definides en el fitxer d'imatge, que s'incorpora a la pàgina. Aquesta mida es descriu com la <strong>mida intrínseca</strong>, que prové de la imatge mateixa.</p>
+
+<p>Quan poses una imatge en una pàgina i no en canvies l’alçada i l’amplada, ja sigui amb atributs en l’etiqueta <code>&lt;img&gt;</code> o amb el CSS, es mostra amb aquesta mida intrínseca. Hem donat a la imatge de l’exemple següent una vora perquè puguis veure la dimensió que té el fitxer.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
+
+<p>Un element {{htmlelement("div")}} buit, però, no té mida pròpia. Si afegeixes un element {{htmlelement("div")}} sense contingut al teu HTML, i hi poses una vora, com hem fet abans amb la imatge, veuràs que a la pàgina apareix una línia. Es tracta de la vora de l'element replegat sobre si mateix perquè no té contingut que el mantingui obert. En el nostre exemple següent, aquesta vora s'estén per tota l'amplada de l’element que el conté, perquè és un element que té un comportament de bloc, amb el qual ja t'hauries de començar a familiaritzar. No té alçada (ni mida en la dimensió del bloc) perquè no hi ha contingut.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
+
+<p>Afegeix una mica de text a l'interior de l'element buit de l'exemple anterior. Ara la vora envolta aquest text perquè el contingut defineix l'altura de l'element. La mida d'aquest element <code>&lt;div&gt;</code> en la dimensió del bloc prové, per tant, de la mida del contingut. Una vegada més, aquesta és la mida intrínseca de l'element: el contingut en defineix la mida.</p>
+
+<h2 id="Configurar_una_mida_específica">Configurar una mida específica</h2>
+
+<p>Per descomptat, podem donar una mida específica als elements del nostre disseny. Quan es dona una mida a un element (el contingut del qual hauria d’encaixar en aquesta mida) ens hi referim com la <strong>mida extrínseca</strong>. Agafa els elements <code>&lt;div&gt;</code> de l'exemple anterior: podem donar-los valors específics d'amplada i d'alçada, i aleshores tindran aquesta mida, independentment del contingut que hi fiquem a dins. Tal com vam descobrir en l’anterior <a href="/ca/docs/Learn/CSS/Building_blocks/Desbordament_de_contingut">article sobre el desbordament</a>, una altura fixa pot provocar el desbordament del contingut si el contingut no cap en l’espai de la caixa.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
+
+<p>Arranjar l'alçada dels elements amb longituds o percentatges s’ha de fer amb molta cura justament pel problema del desbordament.</p>
+
+<h3 id="Lús_de_percentatges">L'ús de percentatges</h3>
+
+<p>En molts sentits, els percentatges actuen com unitats de longitud, i com hem comentat en l'<a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS#Percentatges">article sobre valors i unitats</a>, sovint es poden intercanviar amb les longituds. Quan fas servir un percentatge has de ser conscient <em>de què</em> és percentatge. En el cas d’una caixa dins d’un altre contenidor, si dones a la caixa secundària un percentatge d’amplada, serà un percentatge de l’amplada del contenidor principal.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
+
+<p>Això és perquè els percentatges es calculen a partir de la mida del bloc contenidor. Sense un percentatge aplicat, el nostre element <code>&lt;div&gt;</code> ocuparia el 100% de l'espai disponible, perquè és un element de bloc. Si hi donem un percentatge d’amplada, es converteix en un percentatge de l’espai que ompliria normalment.</p>
+
+<h3 id="Marges_i_àrea_de_farciment_com_a_percentatges">Marges i àrea de farciment com a percentatges</h3>
+
+<p>Si estableixes <code>margins</code> i <code>padding</code> com percentatges, pot ser que observis algun comportament estrany. En l’exemple següent hi ha una caixa. Hem assignat a la caixa interior un marge ({{cssxref("margin")}}) del 10% i un àrea de farciment ({{cssxref("padding")}}) també del 10%. L'àrea de farciment i el marge de les parts superior i inferior de la caixa tenen la mateixa mida que els marges de l’esquerra i la dreta.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
+
+<p>Podries esperar, per exemple, que el percentatge dels marges superior i inferior sigui un percentatge de l'alçada de l'element, i que el percentatge dels marges esquerre i dret sigui un percentatge de l'amplada de l'element. Però aquest no és el cas!</p>
+
+<p>Quan utilitzes marges i àrees de farciment definits en percentatges, el valor es calcula a partir de la <strong>mida de l’element de línia</strong>, per tant, de l'amplada de l'element quan es treballa en un llenguatge horitzontal. En el nostre exemple, tots els marges i l'àrea de farciment són del 10% de l'amplada de l'element. Això significa que pots tenir marges i àrea de farciment de la mateixa mida al voltant de la caixa. És un fet que val la pena de recordar si utilitzes els percentatges d'aquesta manera.</p>
+
+<h2 id="Mida_mínima_i_màxima">Mida mínima i màxima</h2>
+
+<p>A més d’assignar mides fixes a les coses, podem demanar al CSS que doni a un element una mida mínima o màxima. Si tens una caixa que pot contenir una quantitat variable de contingut i vols que sempre tingui una alçada determinada <em>com a mínim</em>, pots establir la propietat {{cssxref("min-height")}}. La caixa sempre serà almenys d'aquesta alçada, però creixerà si hi ha més contingut del que pot contenir amb aquesta alçada mínima.</p>
+
+<p>En l'exemple següent hi ha dues caixes, totes dues amb una alçada establerta en 150 píxels. La caixa de l’esquerra té 150 píxels d’alçada; la caixa de la dreta ha augmentat la mida a més de 150 píxels perquè té més contingut i no hi cabria.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
+
+<p>Això és molt útil per tractar amb quantitats de contingut variables i evitar desbordaments.</p>
+
+<p>Un ús comú de {{cssxref("max-width")}} és reduir les imatges si no hi ha prou espai perquè es mostrin amb l’amplada intrínseca, alhora que es garanteix que no superen l'alçada de la caixa.</p>
+
+<p>Per exemple, si una imatge té una amplada intrínseca més petita que la de l’element que la conté i hi estableixes una amplada de <code>width: 100%</code>, la imatge s’estirarà i es farà gran, i podria pixelar-se. En canvi, si l’amplada intrínseca fos més gran que l’element que la conté, desbordaria. És probable que no vulguis que passi cap d'aquestes dues coses.</p>
+
+<p>Si en lloc d'això utilitzes <code>max-width: 100%</code>, la imatge es pot fer més petita que la seva mida intrínseca, però no es farà més gran que el 100% de la seva mida.</p>
+
+<p>En l'exemple següent hem utilitzat dues vegades la mateixa imatge. A la primera hi hem donat <code>width: 100%</code>, i com que està continguda en un recipient més gran, s'estén per tota l'amplada del contenidor. La segona imatge, en canvi, té <code>max-width: 100%</code>, i no s’estira per ocupar tot el recipient. La tercera caixa torna a contenir la mateixa imatge, amb <code>max-width: 100%</code>; en aquest cas pots observar com s’ha reduït per encaixar dins la caixa.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
+
+<p>Aquesta tècnica s’utilitza per fer que les imatges siguin <em>adaptatives</em>, de manera que quan es visualitzen en un dispositiu més petit es redueixen adequadament. Però no has d'utilitzar aquesta tècnica per carregar imatges molt grans i després reduir-les en el navegador. Les imatges han de tenir una mida adequada i no han de ser més grans del que es necessita en relació amb la mida més gran en què es poden mostrar en el disseny. La descàrrega d’imatges massa grans fa que el teu lloc web vagi més lent i pot ser més car per als usuaris que tenen una connexió amb comptador de dades.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Troba més informació sobre les <a href="/ca/docs/Learn/HTML/Multimèdia_i_incrustar/Imatges_sensibles">tècniques d’imatges adaptatives</a>.</p>
+</div>
+
+<h2 id="Unitats_de_finestra_gràfica">Unitats de finestra gràfica</h2>
+
+<p>La finestra gràfica (que és l’àrea visible de la teva pàgina en el navegador que utilitzes per visitar un lloc web) també té una mida. En CSS hi ha unes unitats que es relacionen amb la mida de la finestra gràfica: la unitat <code>vw</code> per a l'amplada i la unitat <code>vh</code> per a l'alçada. Amb aquestes unitats pots establir mides relatives a la finestra gràfica de l'usuari.</p>
+
+<p><code>1vh</code> és igual a l'1% de l’alçada de la finestra gràfica, i <code>1vw</code> és igual a l’1% de l’amplada de la finestra gràfica. Pots fer servir aquestes unitats per a dimensionar les caixes, però també el text. A l'exemple següent tenim una caixa que té una mida de 20vh i 20vw. La caixa conté una lletra <code>A</code>, que ha rebut un valor {{cssxref("font-size")}} de 10vh.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
+
+<p><strong>Si canvies els valors de <code>vh</code> i <code>vw</code>, canvia la mida de la caixa o de la lletra; si canvies la mida de la finestra gràfica, també canvien les mides de la caixa i de la lletra perquè es mostren en relació amb la finestra gràfica. Per veure com canvia l'exemple quan canvies la mida de la finestra gràfica, has de carregar l'exemple en una finestra nova del navegador que puguis redimensionar (perquè la teva finestra gràfica és l’<code>&lt;iframe&gt;</code> incorporat que conté l'exemple anterior). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Obre l'exemple</a>, redimensiona la finestra del navegador i observa què passa amb la mida de la caixa i del text.</strong></p>
+
+<p>Dimensionar les coses segons la finestra gràfica pot ser útil en els teus dissenys. Per exemple, si vols que una secció principal es mostri a pantalla completa abans que la resta del contingut, fes que aquella part de la pàgina tingui un 100vh d’alçada i empenyerà la resta del contingut fora de la finestra gràfica, i això significa que només apareixerà quan l'usuari es desplaci pel document.</p>
+
+<h2 id="Resum">Resum</h2>
+
+<p>Aquest article t'ha proporcionat un resum dels problemes principals que podries trobar-te a l’hora de dimensionar les coses en un lloc web. En passar a l’article de <a href="/ca/docs/Learn/CSS/Disseny_CSS">Disseny de pàgines web amb CSS</a>, la mida serà un aspecte molt important per a dominar els diferents mètodes de disseny, per la qual cosa val la pena entendre els conceptes que s'han explicat aquí abans de continuar.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_aquest_mòdul">En aquest mòdul</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diferents direccions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament del contingut</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, mèdia i elements de formulari</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li>
+</ol>