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
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.
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
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à
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
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 }
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 }
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
PRIMA PARTE: IL BOX MODEL
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 }
PRIMA PARTE: IL BOX MODEL
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;}
PRIMA PARTE: IL BOX MODEL
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
PRIMA PARTE: IL BOX MODEL
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>
PRIMA PARTE: IL BOX MODEL
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);
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
PRIMA PARTE: IL BOX MODEL
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
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
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;
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
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>)
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 | 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
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
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; }
PRIMA PARTE: COLORI E SFONDI
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
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;}
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;}
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
PRIMA PARTE: IL BOX MODEL
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;}