Aprenent la web

Recapitulació del model de caixa

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

Examinarem els conceptes bàsics del model de caixa CSS en la nostre Introducció al mòdul CSS. Aquest article us proporcionarà una recapitulació i una immersió en alguns detalls més sobre el tema.

Requisits previs: Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS.)
Objectiu: Recapitular sobre els conceptes bàsics del model de caixa CSS, i afegir alguns detalls més.

Propietats de la caixa

Com que sens dubte coneixereu ara, cada element dins d'un document s'estructura com una caixa rectangular dins del disseny del document, amb propietats que poden modificar-se de la següent manera

  • width i height estableixen amplada/alçada de la caixa del contingut.
  • La família de propietats padding estableix l'amplada del farciment (no us oblideu de les propietats llargues com padding-bottom que us permeten establir un costat a la vegada.
  • La família de propietats border estableix l'amplada, l'estil i el color de la vora (hi ha moltes propietats de vora, llargues, disponibles).
  • La família de propietats margin estableix l'amplada de l'àrea externa que envolta la caixa CSS, la qual cosa fa que empenyi cap amunt contra altres caixes de CSS en el disseny  (una vegada més, les propietats llargues com margin-bottom estan disponible).

Alguns altres punts que val la pena recordar:

  • Les alçades de le caixa no observen longituds de percentatge; 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 en la pàgina per defecte fins al 100% de l'alçada de la finestra.
  • Les vores també ignoren la configuració del percentatge d'amplada.
  • Els marges tenen un comportament específic anomenat col.lapse del marge col.lapse del marge: quan dues caixes es toquen entre si, la distància entre elles és el valor més gran dels dos marges que es toquen i no la seva suma.

Note: vegeu La secció Propietats de la caixa de l'article el model de caixa per obtenir una descripció general més completa i un exemple.

Desbordament (Overflow)

Quan configureu la mida d'una caixa amb valors absoluts (p. ex., un ample/alçada de píxels fixos), el contingut pot no encaixar dins de la mida permesa, en aquest cas el contingut es desborda de 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'amaga 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à amagat.
  • visible:Si hi ha massa contingut, el contingut desbordant es mostra fora de la caixa (normalment aquest és el comportament predeterminat).

Nota: Vegeu La secció Overflow de l'article model de caixa per obtenir una descripció més completa i un exemple.

Clip de fons

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 ser molest (què passa si teniu una imatge de fons en mosaic que voleu estendre només a la vora del contingut?). Aquest comportament es pot ajustar establint la propietat background-clip a la caixa.

Contorn

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 sobre de la caixa sense canviar la mida de la caixa (per ser específic, el contorn es dibuixa fora de la vora de la caixa, dins de la àrea del marge).

Nota: Aneu amb compte quan utilitzeu la propietat del contorn. 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 que no els faci semblar els punts destacats de l'enllaç ja que això podria confondre als usuaris.

Propietats avançades de la caixa

Ara hem tingut una breu recopitulació, vegem algunes propietats més avançades de la caixa que us resultaran útil.

Establir restriccions d'amplada i alçada

Existeixen altres propietats que permeten maneres més flexibles 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.

Un ús obvi és si voleu permetre que l'amplada del disseny sigui flexible, establint l'amplada del contenidor exterior com a percentatge, però tampoc no voldreu que sigui massa ample o massa estret perquè el disseny començaria a semblar malament. Una opció aquí seria utilitzar tècniques de disseny web sensibles (que cobrirem més endavant), però un mètode més senzill podria ser simplement donar al disseny una restricció màxima i mínima:

width: 70%;
max-width: 1280px;
min-width: 480px;

També podeu acoblar això amb la següent línia, que centra el contenidor al que s'aplica a l'interior dels seus pares:

margin: 0 auto;

0 fa que els marges superior i inferior siguin 0, mentre que auto (en aquest cas) comparteix l'espai disponible entre els marges esquerra i dreta del contenidor, centrant-lo. El resultat final és que quan el contenidor estigui dins de les restriccions d'amplada mínima i màxima, omplirà tot l'ample de la finestra. Quan s'excedeix l'amplada de 1280px, el disseny romandrà a 1280px d'ample i començarà a centrar-se dins de l'espai disponible. Quan l'amplada és inferior a 480 píxels, la finestra es tornarà més petita que el contenidor, i haurà de desplaçar-se per veure-ho tot.

Podeu veure l'exemple anterior en acció en min-max-container.html (consulteu el codi font).

Un altre bon ús de max-width és mantenir mitjans (per exemple, imatges i vídeo) restringits dins d'un contenidor. Tornant a l'exemple anterior, la imatge causa un problema - es veu bé fins que el contenidor es torna més estret que la imatge, però en aquest punt la imatge comença a desbordar-se del contenidor (ja que és un ample fix). Per ordenar la imatge, podem establir les següents declaracions:

display: block;
margin: 0 auto;
max-width: 100%;

Els dos primers fan que es comporti com un element de bloc i ho centri dins del contenidor pare. Però la màgia real es troba en la tercera. Ajustar el max-width de la imatge al 100% restringeix l'amplada de la imatge perquè sigui més petita que l'amplada del contenidor. Per tant, si el contenidor es redueix per ser més petit que l'amplada de la imatge, la imatge es reduirà al mateix temps.

Podeu provar aquest exemple modificat a min-max-image-container.html (consulteu el codi font).

Nota: Aquesta tècnica ja funcionava des de Internet Explorer 7, per tant, és un navegador ben transversal.

Canviant el model de caixa completament

L'amplada total d'una caixa és la suma d'aquestes propietats width, padding-right, padding-left, border-right i border-left. En alguns casos, és molest (per exemple, què passa si voleu tenir una caixa amb un ample 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:

Vegem un exemple en viu. Configurarem dos elements <div> idèntics, donant a cadascun el mateix ample, vora i farciment. També utilitzarem JavaScript per imprimir el valor calculat (el valor final en pantalla en píxels) de l'amplada de cada caixa. L'única diferència és que hem donat a la caixa inferior box-sizing: border-box, però hem deixat la caixa superior amb el seu comportament predeterminat.

Primer, l'HTML:

<div class="one"></div>
<div class="two"></div>

Ara la CSS:

html {
  font-family: sans-serif;
  background: #ccc;
}

.one, .two {
  background: red;
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 10px solid black;
  margin: 20px auto;
}

.two {
  box-sizing: border-box;
}

Finalment, una mica de JavaScript per mesurar els amples totals calculats:

var one = document.querySelector('.one');
var two = document.querySelector('.two');

function outputWH(box) {
  var width = box.offsetWidth;
  var height = box.offsetHeight;
  box.textContent = 'Width: ' + width + 'px, Height: ' + height + 'px.'
}

outputWH(one);
outputWH(two);

Això ens dóna el següent resultat:

Llavors, què ha passat aquí? L'amplada i l'alçada de la primera caixa són iguals al contingut + farcit + vora, com era d'esperar. Tanmateix, la segona caixa té el seu ample i alçada igual a l'amplada i alçada establerta al contingut, mitjançant, CSS. El farciment i la vora no s'han afegit a l'amplada i alçada total; en canvi, han pres part de l'espai del contingut, fent que el contingut sigui més reduït i que les dimensions totals siguin iguals.

També podeu veure executar aquest exemple en directe a box-sizing-example.html (consulteu el codi font).

Tipus de visualització de caixa

Tot el que hem dit fins ara s'aplica a caixes que representen elements a 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.

Tipus de visualització comuns

Hi ha molts valors diferents disponibles per a display, els tres més comuns són block, inline i inline-block.

  • Una caixa de block es defineix com una caixa que s'apil·la sobre altres caixes (és a dir, el contingut abans i després de la caixa apareix en una altra línia), i pot tenir un ample i un alt establerts en ella. El model de caixa complet tal com s'ha descrit anteriorment s'aplica a les caixes de bloc.
  • Una caixa 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 inline; qualsevol farcit, marge i vora configurat en caixes en línia actualitzarà la posició del text circundante, però no afectarà la posició de les caixes de block circumdants.
  • Una caixa 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 inline, però es pot dimensionar amb amplada i alçada i manté la seva integritat de bloc com una caixa de block - no es trencarà en les línies de paràgraf (una caixa inline-block que desbordi una línia de text, baixarà a una 2 ª línia, ja que no hi ha prou espai per a la primera línia, sense trencar-se en dues Línies).

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

Nota: Vegeu La secció de Tipus de caixa CSS de l'article model de caixa per obtenir una descripció més completa i un exemple.

Tipus de visualització poc freqüents

També hi ha alguns valors menys utilitzats per a la propietat display que trobareu en els vostres viatges. Alguns d'aquests han existit durant un temps i són força compatibles, mentre que d'altres són més nous i menys compatibles. Aquests valors, en general, van ser creats per facilitar la creació de pàgines web/dissenys d'aplicacions. Els més interessants són:

  • display: table -  permet emular dissenys de taules mitjançant elements que no són de taula, sense abusar de la taula HTML per fer-ho. Per llegir més sobre això, vegeu Taules CSS tables.
  • display: flex - permet resoldre molts problemes de disseny clàssic que ha patit CSS durant molt de temps, com ara establir una sèrie de contenidors en columnes d'ample igual flexible, o centrar verticalment el contingut. Per obtenir més informació, vegeu Flexbox.
  • display: grid — CSS proporciona una manera nativa d'implementar fàcilment els sistemes de quadrícula, mentre que tradicionalment s'ha basat en marcs (frameworks) de quadrícula CSS en certa manera. El nostre article CSS Grids explica com utilitzar els marcs (frameworks) tradicionals de quadrícula CSS, i dóna un cop d'ull a les quadrícules CSS nadives.

Que segueix

Després d'una ràpida petita recopilació, hem analitzar algunes de les característiques més avançades de CSS per a la manipulació de caixes i hem acabat tocant algunes característiques de disseny avançades. Amb tot això, darrere de nosaltres, ara anem a passar a mirar els fons

Document Tags and Contributors

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