Trattiamo adesso di un elemento che fa parte del layout avanzato dei css ossia il box model. I Box model sono blocchi di elementi che possono contenere del codice html oppure a loro volta altri elementi e come dice chiaramente il nome sono dei box ossia delle scatole , contenitori. Secondo le specifiche emesse dal Consorzio w3, ogni box deve essere composto da un content e da dei margini opzionali.
- padding margine interno del box
- border il bordo del box
- margin la distanza tra il bordo e gli elementi che lo circondano.
Non vi preoccupate capirete tutto meglio con gli esempi. scriviamo infatti
.esempiobox {
background : #FFFFFCC;
margin 30: px;
bprder 2 px solid #006600;
padding :8 px;
width : 400 px;
height : 100 px;
font-family:Georgia, "Times New Roman", Times, serif; text-align: justify;
}
e richiamatelo con un tag div avente class esempiobox Come potrete vedere avete ricreato una scatola all’interno del quale potrete inserire un testo a vostra scelta. Volendo si puo’ mettere anche uno sfondo utilizzando la solita proprietà dei paragrafi che si chiama
La sintassi del Box Model
- background-image con url di un’immagine che si vuole utilizzare all’interno del box, le altre proprietà sempre inerente all’immagine da utilizzare all’interno del nostro oggetto potrebbero essere
- background-repeat serve a definire il comportamento dell’immagine di sfondo, ossia se essa dovra’ essere ripetuta
- bakground-position consente di definire la posizione dell’immagine di sfondo , se non ripetuta o il punto da cui partire, puo’ essere definita in pixel o percentuale e ovviamente allineata
- background-attachment permette di stabilire se l’immagine di sfondo dovra’ scorrere insieme al resto del contenuto oppure rimanere ferma quando l’utente agisce sulle barre di scorrimento. Puo’ assumere i valori di scroll ed in tal caso l’immagine scorre insieme alla pagina, fixed invece rimane fissata
Ora vediamo come fare scorrere i contenuti all’interno del box con delle barre di scorrimento.
In quanto i css danno la possibilità di gestire quel che viene chiamato overflox, ossia la sovrabbondanza dei contenuti. Esiste, infatti, la possibilità di definire il comportamento del browser quando la dimensione fissata non è sufficiente alla visualizzazione completa del contenuto E quindi si ricorre alla proprietà overflow che puo’ assumentere come valori
- visible rimane il contenuto visibile ma viene forzata la dimensione del contenitore
- hidden i contenuti eccedenti rimangono nascosti alla vista dell’utente nel browser
- scrool vengono aggiunte delle barre di scorrimento che permattano di accedere ai contenuti eccedenti
- auto il browse si comporta secondo la sua impostazione di default
Volendo si puo’ ricorrere anche ad una soluzione diciamo piu’ raffinata introducendo le proprietà che definiscono i margini e la spaziatura interna del box. In questo caso l’utilizzo sarà:
- margin-left per il margine sinistro, dimensione fissata o percentuale
- margin-right per il margine destro, dimensione fissata o percentuale
- margin-top per margine del lato superiore
- margin-bottom margine del lato inferiore
.
ma non finisce qui le potenzialità dei box model dei css non sono finite ve ne vogliamo illustrare una ultimissima ossia quella che consente di utilizzare dei box sovrapposti., stiamo parlando di visibility e z-index
- visibility: hidden/visible ovviamente hidden nascosto e visible visibile
- z-index: ovviamente il box avente valore di z superiore ad un altro che per default è zero, sarà sovrapposto a questo ultimo