7 box model

Pubblicato il di

Tutti gli elementi html si dispongono sulla pagina definendo un riquadro (box).

Per ogni elemento possiamo individuare quella che è l’area dei contenuti, per esempio l’area occupata dal testo, da un form, da un’immagine in un paragrafo, in un div, in uno span… La nostra content area nell’esempio è rappresentata da colore blu

Ogni elemento può avere un bordo (border) con un suo spessore, rappresentato dal colore giallo.
Si può poi specificare un padding (fasciatura), ovvero uno spazio tra il boro e l’area dei contenuti (colore viola).
Si può anche specificare uno spazio tra il bordo e gli elementi circostanti, il margine (margin), colore verde.
Per il bordo, il margin e il padding, posso specificare su quale lato voglio lavorare tramite left, right, top, bottom.
Ci sono delle proprietà che non sono comuni a tutti gli elementi e che li suddividono in 2 macro categorie:

elementi di blocco (block)

due esempi tipici di elementi in block sono il paragrafo <p> o il <div>.

Si può forzare per l’area dei contenuti un’altezza e una larghezza, qualora non lo si faccia l’elemento occuperà di default tutto lo spazio a disposizione che corrisponderà a tutto il body se non è contenuto in un altro elemento, diversamente si espanderà alla dimensione massima del blocco che lo contiene.

<p style="background-color: red; color: white; line-height: 70px;" >

a

Come si vede l’elemento di blocco paragrafo occupa il totale della larghezza e altezza disponibile, per vederlo meglio ho specificato un’altezza di 70 pixel con la proprietà line-height . Proviamo a forzare una larghezza e un’altezza di 200 pixel

<p style="background-color: red; color: white; height: 200px; width: 200px">
    a
</p>

Come si può notare il paragrafo non aderisce perfettamente alla finestra. Questo spazio cambia da browser a browser ed è un valore di margine impostato per il tag body. Si può azzerare con

<body style="margin: 0px;">

e poi si può reimpostare a nostro piacimento e sarà almeno uniformato a tutti i browser.

Se aggiungiamo al ns paragrafo del margine, del bordo e del padding

<p style="background-color: red; color: white; height: 200px; width: 200px; margin: 20px; padding: 40px; border: dotted black 40px;">
 a
</p>

Il totale delle dimensioni del paragrafo aumenterà della somma dei 3 elementi (margin+border+paddin) + la content area.

Le dimensioni di un paragrafo con molto testo inserito in un div più piccolo del testo faranno si che esso straborderà dal div che lo contiene.

elementi in linea (in line)

tipico esempio di elemento in linea è lo span . Essi si estendono per lo stretto necessario (contenuto), a differenza degli elementi block.

<span style="background-color: yellow">ciao sono uno span!</span>

Altra differenza è che non è possibile controllare le dimensioni .

Anche lo span, come il p, esce fuori da un div che lo contiene se supera la dimensione impostata, un modo per ovviare al problema su entrambi gli elementi è l’uso della proprietà overflow .

<div style="background-color: pink; width: 200px; height: 200px; margin: 20px; padding: 40px; overflow: auto ;">

Se lo span (o il p) contenuti in questo div, superano i 200 pixel, con overflow impostato a auto, compariranno barre di scorrimento verticale (o orizzontale all’occorrenza ). Impostando overflow su hidden, invece il testo non andrà oltre le dimensioni prestabilite.

Vediamo come si comportano degli elementi inline messi in fila:

<span style="background-color: yellow">ciao sono uno span!</span>
<span style="background-color: orange">un altro span!</span>
<img src="quadri.png" width="100px">
<a href="http://faghy.it">sono un link</a>
<span style="background-color: yellow">ancora span!</span>

Questi elementi verranno disposti tutti sulla stessa riga.

Per gli elementi di blocco, vige la regola dell’andare a capo, quindi ogni elemento di blocco, se non forzato diversamente, occupa un’intera linea.

Ci sono numerose quick reference online che mostrano quali sono gli elementi di blocco (es di blocco)

e quali gli elementi in linea (es  in linea).

Flex box

La modalità flex box permette di posizionare in modo semplice box fluidi nella nostra finestra del browser. Si ha un contenitore chiamato flex container che viene automaticamente creato impostando la sua proprietà display : flex. Il contenitore a sua volta avrà degli elementi al suo interno chiamati box flessibili o flex items. Su questi elementi non hanno effetto le proprietà float, clear e vertical-align.

Proprietà per il contenitore o flex container

 

Proprietà Valori Descrizione
display: flex è il valore della proprietà display con cui si imposta un contenitore flessibile;
flex-direction row | row-reverse | column | column-reverse specifica la direzione dell’asse principale (main axis) su cui si dispongono i box flessibili nel contenitore;
flex-wrap nowrap | wrap | wrap-reverse specifica se i box all’interno del contenitore si dispongono su una riga o su più righe in base allo spazio disponbile;
flex-flow è una proprietà a sintassi abbreviata con cui esprimere insieme i valori per flex-direction e flex-wrap;
justify-content flex-start | flex-end | center | space-between| space-around stabilisce la modalità di allineamento dei box flessibili sull’asse principale del contenitore;
align-items stretch | flex-start | flex-end | center | baseline gestisce l’allineamento dei box flessibili lungo l’asse perpendicolare (cross axis) all’asse principale;
align-content stretch | flex-start | flex-end | center | space-between | space-around gestisce l’allineamento di una riga di box flessibili lungo l’asse perpendicolare; ha effetto solo su contenitori multi-riga;

Proprietà per i box flessibili o flex items

Proprietà Valori Descrizione
order specifica l’ordine in cui viene mostrato un box rispetto agli altri definiti nel contenitore;
align-self auto | flex-start | flex-end| center | baseline | stretch consente di specificare per un singolo box l’allineamento sull’asse perpendicolare, superando caso per caso le impostazioni definite con la proprietà align-items;
flex-grow consente di impostare il fattore di ingrandimento di un box rispetto agli altri presenti nel contenitore quando si distribuisce lo spazio disponbile;
flex-shrink è la proprietà opposta rispetto a flex-grow, dal momento che agisce sul fattore di restringimento relativo tra i box;
flex-basis consente di specificare la dimensione principale (main size) iniziale (in valori assoluti o in percentuale) di un box;
flex proprietà a sintassi abbreviata per dichiarare in un’unica regola i valori per flex-grow, flex-shrink e flex-basis.

Per provare nella pratica le varie proprietà flex consiglio questo tools .