MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

El model de caixa

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

El model de caixa CSS és la base del disseny a la Web - cada element es representa com una caixa rectangular, amb el contingut de la caixa, el farcit (padding), la vora (border) i el marge (margin) construïts un al voltant de l'altre com les capes d'una ceba. A mesura que un navegador processa un disseny de pàgina web, determina quins estils s'apliquen al contingut de cada caixa, cuán grans són les capes de ceba circumdants i on se situen les caixes entre si. Abans d'entendre com crear dissenys CSS, heu d'entendre el model de caixa - això és el que veurem en aquest article.

Requisits previs: Coneixements bàsics d'informàtica, el programari bàsic instal.lat, coneixement bàsic del treball amb fitxers , els fonaments d'HTML (estudi d'Introducció a HTML), i una idea de com funciona CSS (estudiar els articles anteriors d'aquest mòdul).
Objectiu: Obtenir informació sobre com funciona el model de caixa CSS i sobre com es defineixen elements individuals en una pàgina

Propietats de la caixa

Cada element dins d'un document s'estructura com una caixa rectangular dins del disseny del document, la mida i "capes de ceba" es poden ajustar utilitzant algunes propietats CSS específiques. Les propietats rellevants són les següents:

width i height

Les propietats width i height estableixen l'amplada i l'alçada de la caixa del contingut, que és l'àrea on es mostra el contingut de la caixa: aquest contingut inclou tant el contingut de text assegut a l'interior de la caixa com altres caixes que representen elements fills niats.

Nota: Existeixen altres propietats que permeten maneres més subtils de manejar la mida de la caixa de contingut: establir restriccions de mida en lloc d'una mida absoluta. Això es pot fer amb les propietats min-width, max-width, min-height i max-height.

padding
Farciment (Padding) es refereix al marge intern d'una caixa CSS: entre la vora exterior de la caixa de contingut i la vora interior de la vora. La mida d'aquesta capa es pot establir als quatre costats alhora amb la propietat abreujada padding, o un costat a la vegada amb les propietats padding-top, padding-right, padding-bottom i padding-left.
border
La vora (border) d'una caixa CSS es troba entre la vora exterior del farciment (padding) i la vora interna del marge (margin). De manera predeterminada, la vora té una mida de 0, cosa que la fa invisible, però podeu definir el gruix, l'estil i el color de la vora per fer que aparegui. La propietat abreujada border us permet establir tots aquests quatre costats alhora, per exemple border: 1px solid black. Això es pot desglossar en nombroses propietats esteses diferents per necessitats d'estil més específics:
margin

El marge (margin) envolta una caixa CSS, i empeny cap amunt contra altres caixes CSS en el disseny. Es comporta com un farciment (padding); la propietat abreujada és margin i les propietats individuals són margin-top, margin-right, margin-bottom i margin-left.

Nota: Els marges tenen un comportament específic anomenat col.lapse del marge (margin collapsing): Quan dos caixes es toquen entre si, la distància entre elles és el valor de la més gran dels dos marges que es tocan, i no la seva suma.

Aprenentatge actiu: jugar amb caixes

En aquest punt, anem a saltar en una secció d'aprenentatge actiu i dur a terme alguns exercicis per il·lustrar alguns dels detalls del model de caixa que hem comentat anteriorment. Podeu provar aquests exercicis a l'editor en viu a continuació, però pot ser que sigui més fàcil veure alguns dels efectes si creeu fitxers HTML i CSS separats localment i provar-ho en una altra finestra del navegador. Podeu trobar el codic d'exemple en Github.

Si cometeu un error, sempre podeu restablir-lo mitjançant el botó Reset. Si esteu realment atrapats, premeu el botó Show solution per veure una resposta potencial.

En l'exemple editable a continuació, tenim un conjunt de tres caixes, totes les quals contenen contingut de text i s'han dissenyat per abastar l'amplada total del cos. Estan representades per elements <header>, <main> i <footer> en el marcat. Ens agradaria que us concentréssiu en les tres regles CSS inferiors -les que apunten a cada caixa individualment - i proveu el següent:

  • Feu un cop d'ull al model de caixa de cada element individual a la pàgina obrint les eines del desenvolupador del navegador i fent clic als elements de l'inspector DOM. Vegeu Descobreix les eines de desenvolupadors de navegador per obtenir ajuda sobre com fer-ho. Cada navegador té un visor de models de caixa que mostra exactament el marge, la vora i el farcit que s'aplica a cada caixla, la mida de la caixa de contingut i l'espai total que ocupa l'element.
  • Establiu el margin-bottom en l'element <main>, en 20px. Ara establiu el margin-top en l'element <footer>, en 15px. Tingueu en compte que la segona d'aquestes accions no fa cap diferència amb el disseny - això mostra el col·lapse del marge en acció; L'ample efectiu del marge menor es redueix a 0, deixant només el marge més gran.
  • Establiu un marge en 30px i un padding de 30px a cada costat de l'element <main> - observeu com l'espai al voltant de l'element (el marge) i l'espai entre la vora i el contingut (el farciment) augmenten, fet que provoca que el contingut real ocupi una menor quantitat d'espai. Una vegada més, comproveu això amb les eines del desenvolupador del navegador.
  • Establiu una vora més gran a totes les cares de l'element <main>, diguem 40px i observeu com aquest pren l'espai de contingut en lloc del marge o el farciment. Podeu fer això establint un nou conjunt de valors per a l'amplada, l'estil i el color amb la propietat border, p. ex. 60px de color vermell puntejat, però com que les propietats ja estan establertes en una regla anterior, podríeu establir un nou border-width.
  • Per defecte, el contingut width està configurat en el 100% de l'espai disponible (després que el marge, la vora i el farcit hagin pres la seva part), si canvieu l'ample de la finestra de l'explorador, les caixes creixeran i encongiran per romandre dins de la finestra de sortida d'exemple. El height del contingut serà per defecte a l'alçada del contingut que hi ha a l'interior.
  • Intenteu establir un nou ample i alçada en l'element <main>: comenceu per donar una amplada de 400px i una alçada de 200px i observeu l'efecte. Notareu que l'amplada ja no canvia a mesura que la mida de la finestra del navegador es redimensiona.
  • Intenteu establir un ample percentual en l'element <main> en lloc - diguem 60% d'ample - i observeu l'efecte. Hauríeu de veure que l'amplada ara canvia de nou a mesura que es redimensiona la finestra del navegador. Suprimiu la configuració de height de l'element <main> per ara.
  • Proveu d'ajustar el marge (margin) i el farcit (padding) de l'element <main> en un 5% per tots els costats i observeu el resultat. Si utilitzeu les eines de desenvolupador del navegador per veure l'amplada de la finestra de sortida d'exemple i comparar-lo amb l'amplada del marge/farcit, veureu que aquest 5% significa "5% de l'amplada de l'element que conté". Així que, a mesura que augmenta la mida de la finestra de sortida d'exemple, també ho fan els marges/farcits.
  • Els marges poden acceptar valors negatius, que es poden utilitzar perquè les caixes d'elements es superposin. Intenteu establir el margin-top: -50px; en l'element <main> per veure l'efecte.
  • Seguiu experimentant!

Alguns suggeriments i idees:

  • Per defecte background-color/background-image s'estnen fins a la vora de la vora. Aquest comportament es pot canviar utilitzant la propietat background-clip, que aprendreu a la secció Background_clip.
  • Si la caixa de contingut es fa més gran que la finestra de sortida d'exemple, es desbordarà fora de la finestra i apareixeran barres de desplaçament que us permetran desplaçar-vos per la finestre per veure la resta de la caixa. Podeu controlar el desbordament amb la propietat overflow - vegeu també la secció Overflow a continuació.
  •  Les altures de caixa no observen longituds percentuals; L'alçada de la caixa sempre adopta l'alçada del contingut de la caixa, tret que s'estableixi una alçada absoluta específica (p. ex., píxels o ems). Això és més convenient que l'alçada de cada caixa de la pàgina, per defecte el 100% de l'alçada de la finestra.
  • Les vores ignoren els ajustos de percentatge d'ample, també.
  • Heu d'haver notat que l'amplada total d'una caixa és la suma de width, padding-right, padding-left, border-right i border-left. En alguns casos, és molest (per exemple, què passa si voleu tenir una caixa d'amplada total del 50% amb vora i farcit expressada en píxels?) Per evitar aquests problemes, és possible ajustar el model de caixa amb la propietat box-sizing. Amb el valor border-box, canvia el model de caixa a aquest nou:

Manipulació de caixa avançada

Més enllà de configurar l'amplada, alçada, vora, farcit i el marge de les caixes, hi ha altres propietats disponibles per canviar la manera com es comporten. Aquesta secció tracta sobre aquestes altres propietats.

Desbordament (Overflow)

Quan configureu la mida d'una caixa amb valors absoluts (p. ex. una amplada/alçada fixe de píxels), el contingut pot no encaixar dins de la mida permesa, en aquest cas el contingut desborda la caixa. Per controlar el que passa en aquests casos, podem utilitzar la propietat overflow. Es necessiten diversos valors possibles, però els més freqüents són:

  • auto: Si hi ha massa contingut, el contingut desbordant s'oculta i es mostren barres de desplaçament per permetre que l'usuari es desplaci per veure tot el contingut.
  • hidden: Si hi ha massa contingut, el contingut desbordant està ocult.
  • visible: Si hi ha massa contingut, el contingut desbordant es mostra fora de la caixa (normalment aquest és el comportament predeterminat).

Aquí teniu un exemple senzill per mostrar com funciona aquesta configuració:

Primer, alguns HTML:

<p class="autoscroll">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="clipped">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="default">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

I ara, alguns CSS per aplicar al vostre HTML:

p {
  width  : 400px;
  height : 2.5em;
  padding: 1em 1em 1em 1em;
  border : 1px solid black;
}

.autoscroll { overflow: auto;    }
.clipped    { overflow: hidden;  }
.default    { overflow: visible; }

El codi anterior dóna el següent resultat:

Clip de fons (background-clip)

Els fons de la caixa es componen de colors i imatges, apilats uns sobre altres (background-color, background-image). S'apliquen a una caixa i dibuixat sota aquesta caixa. De manera predeterminada, els fons s'estenen a la vora exterior de la vora. Això sovint és bo, però en alguns casos pot resultar molest (què passa si teniu una imatge de fons en mosaic que només voleu ampliar fins a la vora del contingut?). Aquest comportament es pot ajustar establint la propietat background -clip en la caixa.

Vegem un exemple per veure com funciona això. Primer, el nostre HTML:

<div class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

Ara el CSS:

div {
  width  : 60px;
  height : 60px;
  border : 20px solid rgba(0, 0, 0, 0.5);
  padding: 20px;
  margin : 20px 0;

  background-size    : 140px;
  background-position: center;
  background-image   : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
  background-color   : gold;
}

.default     { background-clip: border-box;  }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

El codi anterior dóna el següent resultat:

Contorn (Outline)

Finalment, però no menys important, el outline d'una caixa és quelcom que sembla una vora però que no forma part del model de caixa. Es comporta com la vora però es dibuixa a la part superior de la caixa sense canviar la mida de la caixa (per ser específic, el contorn es dibuixa fora de la caixa de la vora, dins de la zona de marge).

Nota: Aneu amb compte quan utilitzeu la propietat outline. En alguns casos, s'utilitza per motius d'accessibilitat per destacar les parts actives d'una pàgina web, com ara enllaços, quan un usuari fa clic a ells. Si trobeu un ús per als contorns, assegureu-vos de no fer que es vegi com punts destacats de l'enllaç ja que això podria confondre als usuaris.

Tipus de caixes CSS

Tot el que hem dit fins ara s'aplica a caixes que representen elements de nivell de bloc. No obstant això, CSS té altres tipus de caixes que es comporten de manera diferent. El tipus de caixa aplicat a un element està especificat per la propietat display. Hi ha molts valors disponibles per a display, però en aquest article ens centrarem en els tres més freqüents; block, inline, and inline-block.

  • Una caixa de bloc (block) es defineix com una caixa que s'apila sobre altres caixes (és a dir, el contingut abans i després de la caixa apareix en una línia separada), i pot tenir l'amplada i alçada establerta en ella. El model de caixa complet tal com s'ha descrit anteriorment s'aplica a les caixes de bloc.
  • Una caixa en línia (inline) és el contrari d'una caixa de bloc: flueix amb el text del document (és a dir, apareixerà en la mateixa línia que el text circumdant i altres elements en línia, i el seu contingut es trencarà amb el flux del text, com a línies de text en un paràgraf). Les configuracions d'amplada i alçada no tenen efecte en les caixes en línia; Qualsevol farcit, marge i vora establert en caixes en línia actualitzarà la posició del text circumdant, però no afectarà la posició de les caixes de bloc circumdants.
  • Una caixa de bloc en línia (inline-block) és quelcom entre els dos primers: flueix amb el text circumdant sense crear salts de línia abans i després com una caixa en línia, però es pot dimensionar usant l'amplada i l'alçada i manté la integritat del bloc com una caixa de bloc: No es trencarà en les línies de paràgraf (a l'exemple següent, la caixa en línia passa a la 2a línia de text, ja que no hi ha prou espai per a això en la primera línia i no es trencarà en dues línies).

Nota: De manera predeterminada, els elements de nivell de bloc tenen establert en ells display: block;  i els elements en línia tenen establert en ells display: inline;.

Això pot semblar una mica confús en aquest moment; Vegem un exemple senzill per ara.

En primer lloc, l'HTML:

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

Ara afegirem alguns CSS:

p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  padding : 0.5em;
  border  : 1px solid green;

  /* That makes the box visible, regardless of its type */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

Aquest codi anterior dóna aquest resultat, que il·lustra el diferent efecte dels tipus de visualització:

Que segueix

En aquest punt, hauríeu de tenir una certa familiaritat amb les caixes CSS i com funcionen. No us preocupeu si no enteneu tot això ara: podeu tornar a llegir aquest article per obtenir una millor comprensió, a més començareu a entendre millor les coses quan comenceu a treballar a través d'alguns exemples pràctics més tard en el curs. A continuació, veurem la Depuració CSS.

Vegeu també

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,