C3 Box model

Il linguaggio CSS
 Sommario
●
Proprietà display e visibility
●
Box model
✔ width e height
✔ padding
✔ border e border-radius
✔ margin
✔ Altre proprietà
2
 Elementi block e inline
●
Gli elementi HTML possono essere di tipo:
✔ block: che creano un blocco, mandando a capo gli altri blocchi
circostanti (es. titoli, paragrafi, elenchi, ecc.);
✔ inline: che non creano un blocco, quindi non mandano a capo
altri elementi e possono essere integrati in un testo (es.
immagini, link, span, ecc.).
●
Gli elementi block possono contenere altri elementi block
oppure inline, mentre gli inline possono contenere solo
elementi inline.
3
 Proprietà display e visibility
●
La proprietà display permette di
modificare la presentazione
predefinita di un elemento HTML,
in genere block o inline.
●
Le recenti versioni di CSS hanno
aggiunto altri valori per display
(flex, table, list-item, ecc.).
●
La proprietà visibility consente
di rendere visibile o invisibile un
elemento, che continua ad
occupare un suo spazio nella
pagina.
Valori di display
block Si comporta come blocco
inline Si comporta come inline
inline-block Assume altezza e larghezza come i
blocchi, ma si dispone in linea con
gli altri elementi come un inline.
none rende l’elemento invisibile e non
posizionato, non viene creato alcun
blocco e non occupa spazio.
Valori di visibility
visible Elemento visibile (predefinito)
hidden Elemento invisibile, ma occupa
spazio
4
 Box model
●
Il Box Model è l’insieme di regole che gestisce l’aspetto grafico degli elementi block.
●
Partendo dall’interno, un box è costituito da:
✔ area del contenuto, dove si trova il contenuto vero e proprio dell’elemento (testo, immagine, video,
ecc.). La larghezza può essere impostata con la proprietà width, mentre l’altezza con height;
✔ padding, spaziatura che si trova tra il bordo esterno del box e l’area del contenuto, il suo spessore
si imposta con la proprietà padding;
✔ bordo, è la linea che circonda il box compreso di padding, si può regolarne spessore, stile e colore
con la proprietà border;
✔ margine, spaziatura che si trova tra l’esterno del bordo e tutti gli altri elementi che circondano il
box dell’elemento, il suo spessore si può regolare con la proprietà margin.
●
Di ogni proprietà ci sono le rispettive proprietà -top, -right, -bottom, -left per
impostare le caratteristiche della sezione superiore, destra, inferiore e sinistra.

5
 Box model
margin-top
border-top
padding-top
altezza area visibile
altezza complessiva

padding-right

margin-right
border-right
padding-left
margin-left
border-left
Area del

height
contenuto
width

padding-bottom
border-bottom
margin-bottom

larghezza area visibile

larghezza complessiva
6
 Box model: width e height
●
Si riferiscono alle dimensioni dell’area visibile, non a tutto il blocco che
include anche padding, border e margin.
●
width, larghezza dell’area del contenuto di un blocco:
✔ auto, valore predefinito calcolato dal browser;
✔ <dimensione>, valore numerico espresso in px, pt, em, cm e altre unità di misura;
✔ <percentuale>, valore della larghezza in percentuale rispetto al blocco contenitore.
●
height, altezza dell’area del contenuto di un blocco:
✔ auto, valore predefinito calcolato dal browser;
✔ <dimensione>, valore numerico espresso in px, pt, em, cm e altre unità di misura;
✔ <percentuale>, valore dell’altezza in percentuale rispetto al blocco contenitore.
7
 Box model: padding
●
Spaziatura che si trova tra il bordo esterno del box e l’area del contenuto.
●
padding, può avere da 1 a 4 valori che permettono di definire lo spessore del padding sui quattro
lati:
padding: <top> <right> <bottom> <left>;
padding: <top> <right-left> <bottom>;
padding: <top-bottom> <right-left>;
padding: <top-right-bottom-left>;
●
I valori possono essere:
✔ auto, valore predefinito calcolato dal browser;
✔ <dimensione>, valore numerico espresso in px, pt, em, cm e altre unità di misura;
✔ <percentuale>, valore del padding in percentuale rispetto alla larghezza del blocco contenitore.
●
È possibile definire singolarmente i padding con padding-top, padding-right,
padding-bottom, padding-left.
8
 Box model: border
●
Linea che circonda il box, compreso di padding.
●
border permette di definire le caratteristiche del bordo sui quattro lati del blocco:
border: <spessore> <stile> <colore>;
●
<spessore> può assumere i seguenti valori:
✔ medium, valore predefinito che specifica uno spessore medio;
✔ thin, thick, imposta uno spessore meno spesso o più spesso;
✔ <dimensione>, valore numerico espresso in px, pt, em, cm e altre unità di misura.
●
<stile> può assumere i seguenti valori:
✔ none, valore predefinito che specifica nessun bordo;
✔ dotted (punteggiato), dashed (tratteggiato), solid (continuo), double (doppio), ecc.
●
<colore> può essere un qualunque colore definito col proprio nome, in esadecimale, rgb, rgba, ecc.
●
È possibile definire singolarmente i bordi con border-top, border-right, border-bottom,
border-left.

9
 Box model: border-radius
●
Permette di impostare un arrotondamento degli angoli dei bordi
●
border-radius può avere da 1 a 4 valori che permettono di definire i vari angoli del bordo:
border-radius: <top-left> <top-right> <bottom-right> <bottom-left>;
border-radius: <top-left> <top-right/bottom-left> <bottom-right>;
border-radius: <top-left/bottom-right> <top-right/bottom-left>;
border-radius: <tutti gli angoli>;
●
I valori possono essere:
✔ <dimensione>, valore numerico espresso in px, pt, em, cm e altre unità di misura;
✔ <percentuale>, valore in percentuale.
●
È possibile definire singolarmente i bordi arrotondati con border-top-right, border-
top-left, border-bottom-left, border-bottom-right.

10
 Box model: margin
●
Spaziatura che si trova tra l’esterno del bordo e tutti gli altri elementi che circondano il box
dell’elemento.
●
margin, può avere da 1 a 4 valori che permettono di definire lo spessore del margine sui quattro lati:
margin: <top> <right> <bottom> <left>;
margin: <top> <right-left> <bottom>;
margin: <top-bottom> <right-left>;
margin: <top-right-bottom-left>;
●
I valori possono essere:
✔ auto, valore predefinito calcolato dal browser;
✔ <dimensione>, valore numerico espresso in px, pt, em, cm e altre unità di misura;
✔ <percentuale>, valore del margine in percentuale rispetto alla larghezza del blocco contenitore.
●
È possibile definire singolarmente i margini con margin-top, margin-right, margin-bottom,
margin-left.

11
 Box model: altre proprietà
● min-height, max-height, min-width,
max-width: altezza e larghezza minima e massima.
●
overflow: consente di stabilire il comportamento del contenuto
eccedente, cioè che va oltre la grandezza dell’area che lo contiene.
Possibili valori:
✔ visible (predefinito), il contenuto eccedente viene mostrato;
✔ hidden, il contenuto eccedente viene nascosto;
✔ scroll, il browser nasconde il contenuto eccedente ma mostra delle barre di
scorrimento per visualizzare il contenuto nascosto;
✔ auto, il browser agisce secondo le proprie impostazioni prededefinite.
12