CSS Proprietà del box model

Laboratorio di Tecnologie Web CSS Proprietà del box model Dott. Stefano Burigat www.dimi.uniud.it/burigat

Box model Abbiamo introdotto in precedenza il concetto fondamentale di box model, in base al quale ogni elemento in un documento html si può considerare racchiuso in un box rettangolare. L'immagine seguente illustra i diversi componenti che costituiscono un box di un qualsiasi elemento. Il cuore è costituito dall'area in cui viene visualizzato il contenuto (content area). I bordi di quest'area sono indicati con il termine inner edge e non vengono visualizzati dai browser. Il padding è un'area opzionale che può essere aggiunta tra il contenuto ed il bordo vero e proprio (border), anch'esso opzionale. Il margine è un'area opzionale che può essere aggiunta all'esterno del bordo. Normalmente, tale area è trasparente. I bordi del margine (outer edges) costituiscono il limite esterno del box dell'elemento (e non vengono visualizzati). Tutti gli elementi hanno questi componenti ma, come vedremo, alcune loro proprietà si comportano in modo differente a seconda che l'elemento sia di tipo blocco

oppure inline. In generale, le proprietà che si applicano agli elementi del box model NON vengono ereditate. Padding Per aggiungere spazio di padding tra il contenuto di un elemento ed il bordo, si utilizzano la proprietà padding oppure le singole proprietà padding-top, padding-right, padding-bottom e padding-left (se si vuole controllare separatamente lo spazio sui diversi lati). I valori di queste proprietà sono misure di lunghezza o valori percentuali (in quest'ultimo caso, la percentuale è riferita alla larghezza dell'elemento genitore). <!DOCTYPE html> background-color: #c2f670; p#d2 { padding-top: 1em; padding-right: 3em; padding-bottom: 1em; padding-left: 3em;

In caso di utilizzo della sola proprietà padding, la sintassi utilizzabile prevede la specifica di 4, 3, 2 o 1 solo valore. Se vengono specificati 4 valori, questi corrispondono nell'ordine a padding-top, padding-right, padding-bottom e padding-left. Se vengono specificati 3 valori, il primo corrisponde a padding-top, il secondo vale sia come padding-right che come padding-left, il terzo corrisponde a padding-bottom. Se vengono specificati 2 valori, il primo corrisponde a padding-top e padding-bottom, il secondo a padding-right e padding-left. Se viene specificato 1 solo valore questo vale su ogni lato. L'esempio precedente può quindi essere riscritto utilizzando la seguente regola. p#d2 { padding: 1em 3em; Bordi Il bordo è l'area (opzionale) tra padding e margine e viene utilizzato per rendere visibile l'area costituita da contenuto e padding. Lo stile del bordo è la proprietà più importante in quanto il bordo non viene visualizzato se tale proprietà non è definita. Come per il padding, è possibile impostare lo stile di un bordo utilizzando la proprietà border-style

oppure le singole proprietà border-top-style, borderright-style, border-bottom-style e border-left-style. Come per la proprietà padding, anche nel caso della proprietà border-style è possibile specificare da 1 a 4 valori, con le stesse regole viste in precedenza. I possibili valori di stile sono costituiti dalle 9 parole chiave none dotted dashed solid double groove ridge inset outset, il cui effetto è illustrato nell'immagine seguente. <!DOCTYPE html> background-color: #c2f670; padding: 1em; p#d1 { border-style: none; p#d2 { border-style: dotted dashed solid double;

La proprietà border-width permette di definire lo spessore di un bordo. I valori possono essere specificati utilizzando le unità di misura della lunghezza viste in precedenza oppure le tre parole chiave thin, medium e thick il cui significato preciso è lasciato all'interpretazione del browser. Anche in questo caso, esistono proprietà specifiche bordertop-width, border-right-width, border-bottom-width, border-left-width per i singoli lati. Notate, nell'esempio seguente, che il valore di default per lo spessore del bordo è medium. <!DOCTYPE html> background-color: #c2f670; padding: 1em; p#d1 { border-style: solid; border-width:.25em;

p#d2 { border-style: solid; border-top-width: thin; border-right-width: medium; border-bottom-width: thick; border-left-width: 12px; La proprietà border-color e le singole proprietà bordertop-color, border-right-color, border-bottom-color, border-left-color possono essere utilizzate per specificare il colore del bordo, andando a sovrascrivere il colore di foreground definito tramite la proprietà color. I valori supportati da queste proprietà sono gli stessi che abbiamo già visto in precedenza per la gestione del colore. E' inoltre possibile utilizzare la parola chiave transparent per rendere il bordo trasparente pur mantenendone le dimensioni. <!DOCTYPE html>

background-color: #c2f670; padding: 1em; p#d1 { border-style: solid; border-top-color: violet; p#d2 { border-style: solid; border-width: thick 12px; border-color: orange yellow; La proprietà border e le singole proprietà border-top, border-right, border-bottom, border-left consentono di specificare stile, spessore e colore del bordo in una sola dichiarazione. Non esiste un ordine specifico nel quale i valori devono essere specificati ma va sempre considerato che se non viene specificato il valore di stile, il bordo non viene visualizzato. Al contrario delle proprietà precedenti, la proprietà border non permette di controllare separatamente i valori da assegnare ai singoli lati (i valori specificati valgono per tutti i lati).

<!DOCTYPE html> background-color: #c2f670; padding: 1em; p#d1 { border-top: solid thick violet; p#d2 { border: solid thick orange; border-right: solid 12px yellow; border-left: solid 12px yellow; La proprietà border-radius e le singole proprietà bordertop-left-radius, border-top-right-radius, border-bottomright-radius, border-bottom-left-radius permettono di arrotondare gli angoli di un bordo. I valori vengono specificati utilizzando le unità di misura di lunghezza (tipicamente em o px) oppure una percentuale (riferita alla

larghezza del box). <!DOCTYPE html> background-color: #c2f670; padding: 1em; p#d1 { border: solid thick; border-radius: 2em; p#d2 { border: solid thick orange; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; La proprietà border-image può essere utilizzata per definire un bordo complesso basato su un'immagine. Nell'esempio che segue, il primo valore della proprietà specifica l'immagine da utilizzare come bordo, il secondo

valore permette di definire la posizione delle linee che dividono l'immagine in 9 parti, secondo lo schema rappresentato nella figura seguente. Il valore indica la distanza dal bordo dell'immagine. E' anche possibile specificare valori diversi per i diversi lati in modo da avere una suddivisione asimmetrica. L'ultimo valore della proprietà determina come vengono gestite le porzioni centrali su ogni lato dell'immagine. Il valore stretch consente di allungare la porzione fino a rimepire lo spazio a disposizione, il valore repeat permette di ripetere la porzione, il valore round (non supportato da tutti i browser) consente di effettuare una ripetizione che eviti pezzi parziali. In pratica, gli angoli dell'immagine vengono utilizzati agli angoli del box mentre il resto dell'immagine viene alterata per coprire lo spazio a disposizione sul bordo del box. Affinchè questa soluzione funzioni si dovrebbe utilizzare un'immagine che sia trasparente al centro in modo che si possa vedere il contenuto del box. E' anche opportuno specificare un bordo per quei browser che non supportano la proprietà border-image.

<!DOCTYPE html> background-color: #c2f670; padding: 1em; p#d1 { border: solid thick; border-radius: 2em; p#d2 { border: solid 27px orange; border-image: url(imgs/border.png) 27 stretch;

Margini I margini vengono utilizzati per evitare che elementi diversi finiscano uno attaccato all'altro. Di default, il browser aggiunge dei margini attorno ad elementi di tipo blocco come i paragrafi. Per specificare i margini di un elemento, vengono utilizzati la proprietà margin e le singole proprietà margin-top, margin-right, margin-bottom, margin-left nello stesso identico modo in cui viene specificato il padding. Come per altre proprietà simili, il metodo più comune per specificare margini è utilizzare em, px o percentuali (in quest'ultimo caso, rispetto alla larghezza dell'elemento padre). E' anche possibile utilizzare il valore auto per lasciare al browser il compito di determinare i margini in modo da riempire lo spazio a disposizione. <!DOCTYPE html> background-color: #c2f670; padding: 1em; p#d1 { border: solid thick; margin: 2em; p#d2 { border: solid 27px orange; margin-top: 2em; margin-right: 250px; margin-bottom: 1em; margin-left: 4em;

Un aspetto di cui tener presente nell'utilizzo dei margini è che margini adiacenti verticali (top e bottom) vengono collassati cioè i loro valori non si sommano ma viene utilizzato solo il valore più grande. Nell'esempio precedente, il margine verticale tra i due paragrafi non è 2em+2em ma solo 2em. L'unico caso in cui questo comportamento non vale è quando vengono considerati elementi di tipo floating o posizionati in modo assoluto (ne parleremo più avanti). Margini destri e sinistri non vengono invece mai collassati. Anche per quanto riguarda gli elementi inline ci sono alcuni aspetti da tenere in considerazione nell'utilizzo dei margini. Per quanto riguarda elementi inline di tipo testo, i margini vengono rispettati solo a destra e sinistra mentre i margini inferiore e superiore non vengono considerati (e quindi non alterano l'altezza delle righe). Per quanto riguarda invece elementi inline di tipo rimpiazzato, come le immagini, tutti i margini vengono considerati.

<!DOCTYPE html> background-color: #c2f670; padding: 1em; p#d1 { border: solid thick; p#d2 { border: solid 27px orange; p#d1 em { margin: 1em; p#d2 img { margin: 1em; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur <img src="imgs/html5.png" alt="" /> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore Infine, è anche possibile specificare margini negativi che portano a spostamenti degli elementi nella direzione opposta a quella normale (ciò può essere utile per gestire il layout degli elementi).

Dimensioni del box Di default, altezza e larghezza del box di un elemento di tipo blocco vengono calcolati automaticamente dal browser. Normalmente, la larghezza è pari a quella della finestra o dell'elemento contenitore e l'altezza è determinata in base al contenuto. E' però possibile utilizzare le proprietà width e height per modificare le dimensioni dell'area del contenuto di un elemento. Entrambe le proprietà accettano misure di lunghezza, percentuali o la parola chiave auto per una gestione automatica da parte del browser (valore di default). Ci sono due modi per specificare le dimensioni di un elemento. Il metodo di default applica i valori di width e height all'area del contenuto (content box). Ciò implica che le reali dimensioni della parte visibile dell'elemento dipendono dalle dimensioni specificate più eventuali padding e bordi. Il secondo metodo, introdotto in CSS3, applica i valori di width e height all'area costituita da content box, padding e bordi (in pratica, l'area visibile di un elemento), risultando più intuitivo. In ogni caso, è possibile specificare width ed height solo per elementi di tipo blocco o elementi inline non rimpiazzati (a meno di non modificare il tipo di elemento tramite proprietà display come vedremo in seguito). La proprietà box-sizing può essere utilizzata per specificare come devono essere interpretati i valori delle proprietà width e height. I due possibili valori sono content-box (il default) e border-box. Il seguente esempio mostra lo stesso paragrafo a cui vengono applicate le stesse proprietà con i due diversi valori di box-sizing.

<!DOCTYPE html> background: #c2f670; width: 500px; height: 150px; padding: 20px; border: 2px solid gray; margin: 20px; p#d1 { p#d2 { box-sizing: border-box; Nel primo caso, la dimensione della parte visibile dell'elemento (esclusi i margini) risulta essere di 544x194 pixel mentre nel secondo caso risulta essere di 500x150 pixel. L'utilizzo di border-box è particolarmente utile quando si specificano le proprietà width ed height in percentuale in quanto permette di semplificare la suddivisione di una pagina in parti (ad esempio, in colonne).

Normalmente, è comune lasciare al browser la determinazione dell'altezza degli elementi invece di usare la proprietà height. Nel caso in cui l'altezza venga specificata esplicitamente, è comunque possibile utilizzare la proprietà overflow per controllare il modo in cui il contenuto viene gestito se lo spazio disponibile non è sufficiente per la visualizzazione completa. I valori possibili sono visible (il testo che fuoriesce dallo spazio disponibile viene comunque visualizzato, comportamento di default), hidden (il testo che fuoriesce non viene visualizzato), scroll (vengono visualizzate delle scrollbar per poter accedere al testo che fuoriesce), auto (il browser decide come gestire il contenuto, soluzione preferibile). <!DOCTYPE html> background: #c2f670; width: 150px; height: 50px; padding: 20px; border: 2px solid gray; margin: 20px; p#d1 { overflow: hidden; p#d2 { overflow: auto;

Oltre a width ed height è anche possibile impostare dei limiti alle dimensioni degli elementi tramite utilizzo delle proprietà max-height, max-width, min-height, minwidth. Nel caso di utilizzo del modello content-box, questi limiti si applicano solo all'area del contenuto. <!DOCTYPE html> background: #c2f670; padding: 20px; border: 2px solid gray; margin: 20px; p#d1 { min-width: 200px; max-width: 500px; p#d2 {

Ombreggiatura La proprietà box-shadow (introdotta in CSS3) permette di aggiungere un'ombreggiatura ad un box di un elemento, nello stesso modo in cui text-shadow permette di aggiungere ombreggiatura al testo. L'ombra viene aggiunta alla parte visibile di un box, cioè (di default) all'esterno del bordo. I due esempi seguenti aggiungono un'ombra di colore grigio (ultimo valore) ai paragrafi, con un offset di sei pixel alla destra (primo valore) e sei pixel in basso (secondo valore) rispetto al box. Nel secondo caso, viene inoltre specificata una sfocatura di 5 pixel (terzo valore) per rendere l'ombra più realistica. <!DOCTYPE html> background: #c2f670; width: 500px; height: 150px; padding: 20px; border: 2px solid gray; margin: 20px; p#d1 { box-shadow: 6px 6px #666; p#d2 { box-shadow: 6px 6px 5px #666;

Cambiare ruolo ad un elemento Abbiamo visto in precedenza che le diverse proprietà CSS possono avere un effetto diverso su elementi html di tipo blocco rispetto ad elementi inline. Tramite la proprietà display è possibile cambiare il ruolo di un elemento in modo che si comporti come un elemento di un altro tipo (ad esempio, far comportare come inline un elemento di tipo blocco). I possibili valori della proprietà sono inline block list-item inline-block table inline-table table-row-group table-header-group table-footer-group table-row tablecolumn-group table-column table-cell table-caption none (CSS3 ha aggiunto ulteriori valori molto meno comuni). Come si può notare, oltre a inline e block, è possibile fare in modo che un elemento si comporti come una lista di elementi o come diverse parti di una tabella. Nella pratica, l'utilizzo di questa proprietà è limitato anche se in certi scenari è diventata di uso comune. Ad esempio, è possibile trasformare elementi <li> (di tipo blocco) in elementi inline al fine di creare menu orizzontali. <!DOCTYPE html> ul.menu li {

display: inline; border: 1px solid; background-color: rgba(255,144,0,1); padding: 5px; margin: 3px; ul.menu li a { text-decoration: none; <ul class="menu"> <li><a href="">elemento 1</a></li> <li><a href="">elemento 2</a></li> <li><a href="">elemento 3</a></li> <li><a href="">elemento 4</a></li> </ul> Un altro utilizzo comune della proprietà display è quello di nascondere un elemento mediante utilizzo del valore none. Al contrario della proprietà visibility con valore hidden, che abbiamo visto in precedenza, display consente di eliminare completamente un elemento dalla visualizzazione, incluso lo spazio che questo occupa a schermo (ciò consente ad esempio di creare contenuto che viene visualizzato solo in particolari circostanze, come in caso di stampa). Va comunque tenuto presente che l'utilizzo della proprietà display non modifica il tipo di elemento a livello html: inserire un elemento all'interno di un elemento inline non è comunque valido anche se si ridefinisce come elemento dal comportamento inline.