IL BOX MODEL

2. PRIMA PARTE: IL BOX MODEL IL BOX MODEL Ogni box è caratterizzato da • Larghezza dello spazio per i contenuti (width) • Altezza dello spazio per i contenuti (height) • Spazio fra contenuti e bordi (padding) • Bordo (border) • Spazio fra il bordo e gli altri oggetti della pagina (margin)

3. PRIMA PARTE: IL BOX MODEL IL BOX MODEL <div>Ex nostrum … </div><div>Indoctum … </div> body { margin: 0; padding: 0; } div { width:300px; padding:10px; border:5px solid #600; margin: 20px; } Si noti che i margini superiori e inferiori adiacenti collassano

4. PRIMA PARTE: IL BOX MODEL IL BOX MODEL • Internet Explorer per Windows versione 5.5 e precedenti ha un modo differente di interpretare il box model: anziché aggiungere il padding e il border alla larghezza dei contenuti, toglie spazio ai contenuti • La larghezza totale del box (bordi e padding compresi) è pari al valore assegnato alla proprietà width.

5. PRIMA PARTE: IL BOX MODEL LARGHEZZA E ALTEZZA • Se non si specifica la larghezza (width) dei contenuti del box, questo si allargherà (margini compresi) per riempire tutto lo spazio a sua disposizione • Se non si specifica la altezza (height) dei contenuti del box, questo si espanderà in verticale il minimo possibile per ospitare gli oggetti al suo interno • La larghezza e la altezza del box possono essere espresse: • In percentuali rispetto alle dimensioni del box contenitore • Tramite le unità di miusra em, px, (ex, pt, mm) • Tramite il valore auto

6. PRIMA PARTE: IL BOX MODEL LARGHEZZA E ALTEZZA • Quando si specifica la larghezza di un box, questa diviene indipendente dalla dimensione effettiva dei suoi contenuti • Internet Explorer per Windows in realtà allarga il box quando i suoi contenuti (ad esempio un’immagine o una stringa molto lunga) eccedono la larghezza del box • È possibile anche indicare una larghezza minima e una larghezza massima tramite le proprietà min-width e max-width, ma Internet Explorer (Win/Mac) non supporta tali proprietà

7. PRIMA PARTE: IL BOX MODEL LARGHEZZA E ALTEZZA • Quando si specifica l’altezza di un box questo non si espanderà per ospitare eventuali contenuti che richiedono maggiore spazio • Per ottenere un simile comportamento esiste infatti la proprietà min-height, ma questa non è supportata né da Internet Explorer né da Safari. Esiste anche la proprietà max-height ma presenta le stesse incompatibilità di min-height • A meno di altre dichiarazioni, IE/Win interpreta la proprietà height come fosse min-height • Quando espressa in ‘%’, l’altezza di un box si riferisce all’altezza esplicitamente del box genitore, quando definita tramite la proprietà height

8. PRIMA PARTE: IL BOX MODEL I MARGINI • I margini possono essere specificati: • Individualmente • A coppie (top/bottom, right/left) • Globalmente • Le unità di misura sono le stesse utilizzate per width e height ed hanno il medesimo comportamento, tranne auto • Per specificare i singoli margini è possibile utilizzare le proprietà margin-top, margin-right, margin-bottom, margin-leftEsempio:div { margin-left:1em; margin-top:2em }

9. PRIMA PARTE: IL BOX MODEL I MARGINI • I quattro margini possono essere specificati anche attraverso la sintassi abbreviata:div { margin : 10px 5px 0 20px }I margini risultano specificati in senso orario: top, right, bottom, left. • Attraverso la sintassi abbreviata, possiamo specificare anche le coppie di margin top/bottom e right/left:#id { margin : 1em 2em } • Infine è possibile specificare un solo valore per tutti e quattro i lati contemporaneamente:.classe { margin: 1em }

10. PRIMA PARTE: IL BOX MODEL I MARGINI • Quando impostati sul valore auto, i margini laterali determinano la centratura orizzontale del box a cui i margini sono applicati • Purtroppo Internet Explorer non supporta questo tipo di centratura orizzontale, per cui richiede una tecnica differente • Quando impostati sul valore auto, i margini superiore e inferiore assumono il valore che il browser assegna loro normalmente • Nelle specifiche CSS non è prevista la centratura verticale dei blocchi

11. PRIMA PARTE: IL BOX MODEL I MARGINI Quando due o più margini sono adiacenti, ovverosia sono non separati da bordi o padding, questi collassano in un unico margine: <div id="box-1">…</div><div id="box-2">…</div>#box-1 { margin: 1em }#box-2 { margin: 2em }

12. PRIMA PARTE: IL BOX MODEL I MARGINI I margini non collassano quando sono separati da un bordo o dal padding: <p>Lorem ipsum dolor …</p> <div><p>Quisque imperdiet …</p></div> div{border:solid;margin:0;} p{margin:1em 0;background:#CCC;color:#000;} div p{margin:1em;} I margini di blocchi flottanti o dei blocchi posizionati in modo assoluto, non collassano in nessun caso.

13. PRIMA PARTE: IL BOX MODEL IL PADDING • Il padding è una sorta di imbottitura fra i contenuti e i bordi di un box • Per specificare il padding si utilizza la stessa sintassi usata per i marginip {padding-left:0.5em; padding-right:0.5em}div { padding: 10px 20px 10px 20px }.classe { padding: 0.5em 0 }#id { padding: 5% } • A differenza di margin, padding non ammette il valore auto e non ammette valori negativi • Il padding di box adiacenti non collassa in nessun caso

14. PRIMA PARTE: IL BOX MODEL I BORDI • I bordi sono caratterizzati da tre aspetti: • stile • spessore • colore • Questi aspetti possono essere definiti separatamente con: • border-style (border-top-style, …) • border-width (border-top-width, …) • border-color (border-top-color, …) • Sono ammesse le dichiarazioni compatte per i quattro lati(border-style: <stile> <stile> <stile> <stile>) • Per definire contemporaneamente i tre aspetti si usa la seguente sintassi:border-top: <spessore> <stile> <colore>border: <spessore> <stile> <colore>

15. PRIMA PARTE: IL BOX MODEL I BORDI Gli stili a disposizione sono : • solid (linea continua singola); • dotted (punteggiato); • dashed (tratteggiato); • double (doppia linea continua – è necessario uno spessore di almeno 3px per ottenere l’effetto desiderato); • groove (scavato); • ridge (effetto opposto a groove, il bordo appare sbalzato); • inset (incastonato, l’effetto grafico equivale a un pulsante premuto); • outset (effetto opposto a inset, l’effetto grafico equivale a un pulsante non ancora premuto). • none (nessun bordo, valore predefinito);

16. PRIMA PARTE: IL BOX MODEL I BORDI • Lo stile predefinito è none, dunque se non si specifica lo stile del bordo questo non sarà comunque mostrato • Lo spessore del bordo può essere espresso attraverso le varie unità di lunghezza o attraverso i tre valori thin, medium, thick, le unità percentuali non sono ammesse • Il colore, se non specificato, corrisponde a quello del testo usato nel box • IE/Win non supporta bordi punteggiati da 1px

17. PRIMA PARTE: COLORI E SFONDI SFONDI • Lo sfondo può essere • Trasparente • Caratterizzato da una tinta piatta • Riempito del tutto o in parte da una immagine • Lo sfondo può essere gestito attraverso le seguenti proprietà: • background-color • background-image • background-repeat • background-attachment • background-position • background (riassume le diverse proprietà)

18. PRIMA PARTE: COLORI E SFONDI COLORE DELLO SFONDO • La proprietà background-color può assumere i seguenti valori: • transparent • <colore> (vedi diapositiva 49) • Il valore predefinito è transparent • A differenza di color, il valore per la proprietà background-color non è ereditato • Se non diversamente specificato, lo sfondo della pagina è stabilito dalle impostazioni del sistema operativo o del browser e non è necessariamente bianco

19. PRIMA PARTE: COLORI E SFONDI COLORI DI TESTO E SFONDO DEFINITI SEPARATAMENTE • Le proprietà color e background-color dovrebbero essere sempre specificate in coppia per evitare conflitti con le impostazioni predefinite • In figura si vede il risultato ottenuto con una impostazione di Windows a contrasto elevato quando il testo è impostato sul blu (#009) ma lo sfondo non è esplicitamente impostato

20. PRIMA PARTE: COLORI E SFONDI BACKGROUND-IMAGE • Per inserire un’immagine di sfondo è sufficiente specificarne l’url tramite la proprietà background-image:background-image:url(/im/sfondo.png); • L’immagine sarà posizionata in alto a destra e sarà ripetuta verticalmente e orizzontalmente • L’immagine scorrerà assieme al testo • Per specificare che non dovrà essere usata nessuna immagine si utilizza il valore none (che è il valore predefinito): background-image:none;

21. PRIMA PARTE: COLORI E SFONDI BACKGROUND-REPEAT • Tramite background-repeat è possibile stabilire se e come l’immagine sarà ripetuta • background-repeat:repeat indica che l’immagine sarà ripetuta orizzontalmente e verticalmente (valore predefinito) • background-repeat:repeat-x indica che l’immagine sarà ripetuta solo orizzontalmente • background-repeat:repeat-y indica che l’immagine sarà ripetuta solo verticalmente • background-repeat:no-repeat indica che comparirà una sola occorrenza dell’immagine

22. PRIMA PARTE: COLORI E SFONDI BACKGROUND-ATTACHEMENT • Tramite background-attachment è possibile stabilire se l’immagine di sfondo sarà fissa ovvero scorrerà con la pagina • background-attachment:scroll indica che l’immagine scorrerà assieme alla pagina (valore predefinito) • background-attachment:fixed indica che l’immagine sarà fissata nella sua posizione iniziale indipendentemente dallo scorrimento della pagina (il funzionamento è garantito solo con <body>)

23. PRIMA PARTE: COLORI E SFONDI BACKGROUND-POSITION • Tramite background-position è possibile stabilire la posizione iniziale dell’immagine. • I valori ammessi sono: • Unità di lunghezza • Unità percentuali • Parole chiave: • left | center | rightper il posizionamento orizzontale • top | center | bottomper il posizionamento verticale • I valori vanno espressi in coppia e indicano rispettivamente il posizionamento orizzontale e verticale

24. PRIMA PARTE: COLORI E SFONDI BACKGROUND-POSITION • Quando sono usate le unità di lunghezza, l’angolo superiore sinistro dell’immagine è posizionato relativamente all’angolo superiore sinistro dell’area del padding • Quando sono utilizzate le unità percentuali si ha il seguente comportamento: • Sia X% il valore percentuale per la posizione orizzontale • Sia Y% il valore percentuale per la posizione verticale • Il punto dell’immagine che si trova alle coordinate X%,Y% sarà posto in posizione X%,Y% dell’area del padding

25. PRIMA PARTE: COLORI E SFONDI BACKGROUND • La proprietà background permette di definire con un’unica dichiarazione tutte le varie proprietà contemporaneamente • Se non sono specificati alcuni valori, allora vengono implicitamente assegnati quelli predefiniti: body { background: #fff url(img.jpg) 100% 0 no-repeat fixed; }

26. PRIMA PARTE: IL BOX MODEL OVERFLOW • Come detto, è possibile specificare la larghezza e l’altezza di un box • Quando i contenuti eccedono le dimensioni del blocco è possibile definire il comportamento del blocco stesso attraverso la proprietà overflow. • La proprietà overflow può assumere i seguenti valori: • visible (valore predefinito) • hidden • scroll • auto

27. PRIMA PARTE: IL BOX MODEL OVERFLOW: VISIBLE • Il valore visible indica che i contenuti vanno mostrati normalmente. • I contenuti dovrebbero essere mostrati senza alterare la dimensione del contenitore • Internet Explorer per Windows espande il contenitore fino alla dimensione richiesta dai contenuti div { width:200px;height:200px; overflow:visible; }

28. PRIMA PARTE: IL BOX MODEL OVERFLOW: HIDDEN • Il valore hidden indica che i contenuti vanno tagliati e non devono apparire barre di scorrimento div { width:200px;height:200px; overflow:hidden; }

29. PRIMA PARTE: IL BOX MODEL OVERFLOW: SCROLL E AUTO • Il valore scroll indica che i contenuti vanno tagliati, se necessario. Le barre di scorrimento devono comunque apparire. • Il valore auto indica che i contenuti vanno tagliati, se necessario. Le barre di scorrimento devono apparire dove necessario. • La dimensione del contenitore non è alterata

30. Css Box model element • Margini: la regione che separa una scatola dall'altra, necessariamente trasparente. • margin-top, margin-bottom, margin-left, margin-right: dimensioni del margine della scatola. • Border: la regione ove visualizzare un bordo per la scatola. • border-top, border-bottom, border-left, border-right, border-width, border-color: dimensioni ed aspetto del bordo. • border-style: può assumere come valori none, dotted,dashed,solid,double,groove,ridge,inset,outset. • Padding: la regione di respiro tra il bordo della scatola ed il contenuto. Ha il colore dello sfondo. • padding-top, padding-bottom, padding-left, padding-right: dimensioni del padding della scatola. • Content: la regione dove sta il contenuto dell'elemento. • background-color, background-image, background-repeat, background-attachment, background-position: colore, immagine e meccanismo di ripetizione dell'immagine di sfondo della scatola. A seguire: Il testo 24/35

31. Forme abbreviate • In molti casi è possibile riassumere in un'unica proprietà i valori di molte proprietà logicamente connesse. • Si usa una sequenza separata da spazi di valori, secondo un ordine prestabilito. Se si mette un valore solo esso viene assunto da tutte le proprietà individuali. Ad esempio: • margin per margin-top, margin-left, margin-bottom, margin-right • border per border-top, border-left, border-bottom, border-right • padding per padding-top, padding-left, padding-bottom, padding-right • font per font-style, font-variant, font-weight, font-size, line-height, font-family P { font: bold italic large Palatino, serif } BODY { padding: 5px; } BODY { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } BODY { margin: 10 0 0 10; } BODY { margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; }