IL BOX MODEL

IL BOX MODELOgni box è caratterizzato da1. Larghezza dello spazio per i

contenuti (width)2. Altezza dello spazio per i contenuti

(height)3. Spazio fra contenuti e bordi

(padding)4. Bordo (border)5. Spazio fra il bordo e gli altri oggetti

della pagina (margin)

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


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.


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


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à


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


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 }


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 }


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


I MARGINIQuando 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 }


I MARGINII 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.

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 margini

p {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


I BORDI• I bordi sono caratterizzati da tre aspetti:

1. stile2. spessore3. 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>


I BORDIGli 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);


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


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à)

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


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


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;


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


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>)


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 | right per il posizionamento orizzontale

• top | center | bottom per il posizionamento verticale

• I valori vanno espressi in coppia e indicano rispettivamente il posizionamento orizzontale e verticale


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


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; }


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


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;}


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;}


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


A seguire: Il testo 24/35

• 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.

Css Box model element

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 { margin: 10 0 0 10; }BODY { margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px;}

BODY { padding: 5px; }BODY { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;}

IL BOX MODEL

Documents

Transcript of IL BOX MODEL