Dimensionar elements en CSS

This translation is incomplete. Please help translate this article from English

En els articles que hem vist fins ara, has descobert diverses maneres de dimensionar els elements d'una pàgina web mitjançant CSS. És important comprendre la importància de les diferents característiques dels elements del teu disseny, i en aquesta lliçó resumirem les maneres en què els elements obtenen una mida mitjançant CSS i definirem uns termes relatius al dimensionament que t'ajudaran en el futur.

Prerequisits: Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i una idea de com funciona el CSS (mira Primers passos amb CSS).
Objectiu: Entendre les diferents maneres en què podem dimensionar les coses en CSS.

La mida natural o intrínseca de les coses

Els elements HTML tenen una mida natural, establerta abans que es vegin afectats per qualsevol codi CSS. Un exemple senzill és una imatge. Una imatge té una amplada i una alçada definides al fitxer d'imatge que s'incorpora a la pàgina. Aquesta mida es descriu com la mida intrínseca, que prové de la imatge mateixa.

Si col·loques una imatge en una pàgina i no canvies la seva alçada i amplada, ja sigui mitjançant atributs a l’etiqueta <img> o al CSS, es mostrarà mitjançant aquesta mida intrínseca. Hem donat la imatge de l’exemple següent una vora perquè puguis veure l’abast del fitxer.

Tanmateix, un element <div> buit no té mida pròpia. Si afegeixes un element <div> sense contingut al teu HTML, aleshores, confereix-li una vora com hem fet amb la imatge i veuràs una línia a la pàgina. Es tracta de la vora de l'element replegat sobre si mateix perquè no hi ha contingut per mantenir-lo obert. En el nostre exemple següent, aquest límit s'estén fins a l'amplada del contenidor, perquè és un element a nivell de bloc, un comportament amb el que t'hauries de començar a familiaritzar. No té alçada (ni mida en la dimensió del bloc) perquè no hi ha contingut.

En l'exemple anterior, prova d'afegir una mica de text a l'interior de l'element buit. Ara el límit conté aquest text perquè l'altura de l'element la defineix el contingut. Per tant, la mida d'aquest element <div> a la dimensió de bloc prové de la mida del contingut. Una vegada més, aquesta és la mida intrínseca de l'element: la seva mida la defineix el contingut.

Configurar una mida específica

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 referim a ella com a mida extrínseca. Agafa els elements <div> de l'exemple anterior: podem donar-li valors específics d'amplada i d'alçada, i ara tindrà aquesta mida independentment del contingut que es col·loqui a dins. Tal com vam descobrir a la nostra lliçó anterior sobre el desbordament, una altura fixada pot provocar que el contingut es desbordi si hi ha més contingut que espai a la caixa.

Degut a aquest problema de desbordament, arreglar l'alçada dels elements amb longituds o percentatges és una cosa que hem de fer amb molta cura.

L'ús de percentatges

En molts sentits, els percentatges actuen com a unitats de longitud i, tal com hem comentat a l'article sobre valors i unitats, sovint es poden intercanviar amb les longituds. Quan utilitzes un percentatge, has de ser conscient de què é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.

Això és degut a que els percentatges es calculen des de la mida del bloc contenidor. Sense percentatge aplicat, el nostre element <div> ocuparia el 100% de l'espai disponible, ja que és un element a nivell de bloc. Si li donem un percentatge d’amplada, es converteix en un percentatge de l’espai que ompliria normalment.

Marges i àrea de farciment com a percentatges

Si estableixes margins i padding com a percentatges, pots notar algun comportament estrany. A l’exemple següent tenim una caixa. Hem assignat a la caixa interior un marge (margin) del 10% i un àrea de farciment (padding) també del 10%. L'àrea de farciment i el marge de la part superior i inferior de la caixa tenen la mateixa mida que el marge de l’esquerra i la dreta.

Podries esperar, per exemple, que el percentatge dels marges superior i inferior sigui un percentatge de l'alçada de l'element, i el percentatge dels marges esquerre i dret sigui un percentatge de l'amplada de l'element. Tot i això, aquest no és el cas!

Quan utilitzes marges i àrees de farciment definits en percentatges, el valor es calcula a partir de la mida en línia de l'element, 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 al voltant de la caixa de la mateixa mida. És un fet que val la pena recordar si utilitzes els percentatges d'aquesta manera.

Mida mínima i màxima

A més de donar a les coses una mida fixa, 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 com a mínim una certa alçada, pots establir la propietat 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.

A l'exemple següent pots veure dues caixes, ambdues amb una alçada estipulada de 150 píxels. La caixa de l’esquerra té 150 píxels d’alçada; a la caixa de la dreta, hi ha més contingut del que pot contenir la caixa i, per tant, ha augmentat la seva mida a més de 150 píxels.

Això és molt útil per tractar amb quantitats de contingut variables i evitar el desbordament.

Un ús comú de max-width és fer que les imatges es redueixin si no hi ha prou espai per mostrar-les amb la seva amplada intrínseca, alhora que s'assegura que no superin l'alçada de la caixa.

Com a exemple, si estableixes width: 100% a una imatge, i la seva amplada intrínseca és menor que el seu contenidor, la imatge es veuria obligada a estirar-se i fer-se més gran, així que apareixerà pixelada. Si la seva amplada intrínseca fos més gran que el seu contenidor, es desbordaria. És probable que no vulguis que passi cap d'aquests dos casos.

Si en lloc d'això utilitzes max-width: 100%, 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.

A l'exemple següent hem utilitzat dues vegades la mateixa imatge. A la primera imatge li hem donat width: 100% i es troba en un recipient més gran i, per tant, s'estén fins a l'amplada del contenidor. La segona imatge té max-width: 100% i, per tant, no s’estira per omplir el recipient. La tercera caixa torna a contenir la mateixa imatge, també amb max-width: 100%; en aquest cas pots veure com s’ha reduït per encaixar a la caixa.

Aquesta tècnica s’utilitza per fer que les imatges siguin responsives, de manera que quan es visualitzen en un dispositiu més petit es redueixen de forma adequada. Tanmateix, no has d'utilitzar aquesta tècnica per carregar imatges realment grans i posteriorment reduir-les al navegador. Les imatges han de tenir una mida adequada i no han de ser més grans del que es necessita en relació a la mida més gran en què es poden mostrar en el disseny. La descàrrega d’imatges massa grans farà que el teu lloc web vagi més lent i pot costar-li més diners als usuaris que teneb una connexió amb medidor de dades.

Nota: Obtén més informació sobre les tècniques d’imatges responsives.

Unitats de finestra gràfica

La finestra gràfica (que és l’àrea visible de la teva pàgina al navegador que utilitzis per visualitzar un lloc web) també té una mida. Al CSS tenim unitats que es relacionen amb la mida de la finestra gràfica: la unitat vw per a l'amplada i vh per a l'alçada. Amb aquestes unitats pots establir mides relatives a la finestra gràfica de l'usuari.

1vh és igual a l'1% de l’alçada de la finestra gràfica, i 1vw és igual a l’1% de l’amplada de la finestra gràfica. Pots fer servir aquestes unitats per 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 A, que ha rebut un valor font-size de 10vh.

Si canvies els valors vh i vw, canviarà la mida de la caixa o de la lletra; si canvies la mida de la finestra gràfica, també canviaran 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 (ja que la teva finestra gràfica és el <iframe> incorporat que conté l'exemple anterior). Obre l'exemple, redimensiona la finestra del navegador i observa què passa amb la mida de la caixa i del text.

Dimensionar les coses segons la finestra gràfics pot ser útil en els teus dissenys. Per exemple, si vols que es mostri una secció principal a pantalla completa abans de la resta del teu contingut, fer que aquella part de la pàgina tingui un 100vh d’alçada empenyerà la resta del contingut fora de la finestra gràfica, el que significa que només apareixerà quan l'usuari es desplaci pel document.

Resum

Aquest article t'ha proporcionat un resum dels problemes fonamentals que podries trobar-te a l’hora de dimensionar les coses a un lloc web. En passar a Compaginar amb CSS, la mida serà un aspecte molt important per dominar els diferents mètodes de disseny, per la qual cosa val la pena comprendre els conceptes que s'han explicat aquí abans de continuar.

En aquest mòdul

  1. La cascada i l'herència
  2. Selectors CSS
  3. El model de caixa
  4. Fons i vores
  5. El maneig de diferents direccions de text
  6. El contingut que es desborda
  7. Els valors i les unitats
  8. Dimensionar elements en CSS
  9. Imatges, media i elements de formulari
  10. Donar estil a les taules
  11. Depurar el CSS
  12. Organitzar el CSS