IL BOX MODEL Ogni box è caratterizzato da 1.Larghezza dello spazio per i contenuti ( width )...

IL BOX MODELOgni box è caratterizzato da

1. 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 Ogni box è caratterizzato da 1.Larghezza dello spazio per i contenuti ( width )...

Documents

Transcript of IL BOX MODEL Ogni box è caratterizzato da 1.Larghezza dello spazio per i contenuti ( width )...