Come utilizzare un box bodel per creare pagine web.
ALLWEB free
Directory Web Script Linguaggi
Italiano Inglese Tutte
 
 24 Jan 2017
aggiungi in preferiti  
Home    Mappa directory    Script




Box model:

I CSS possono andare oltre alla gestione dei caratteri, i CSS con gli appositi tag possono impaginare un intero sito, producendo dei notevoli vantaggi per il webmaster, ossia la minor pesantezza delle pagine, e una maggior flessibilitā nei cambiamenti di stili (inseriti in appositi fogli esterni).


Con l'avvento del linguaggio XHTML il W3C sta cercando di portare ordine nel web limitando l'utilizzo delle tabelle al solo mostrare dati, escludendole da quello che in HTML era il loro ruolo fondamentale: L'impaginazione dei siti.
Per questo motivo il W3C suggerisce di utilizzare il BOX MODEL come unico metodo di impaginazione.



Codice:

Un box non č altro che un tag <div> </div> con i relativi CSS a determinare la larghezza, altezza, bordi e spazi (interni ed esterni).

Un box potrebbe essere il seguente:
Testo, immagini ecc.
<div style="padding:10px; margin:30px; width:300px; height:40px; border:10px solid green;">
Testo, immagini ecc.
</div>



Dimensioni:

Le dimensioni di un box si calcolano sommando tutti gli spazi che lo compongono.
Esempio:
Larghezza o altezza = ((margin + border + padding) * 2) + dimensione
Dove con dimensione intendiamo width oppure height.

Prendiamo ad esempio il box del paragrafo sopra:
<div style="padding:10px; margin:30px; width:300px; height:40px; border:10px solid green;">
Testo, immagini ecc.
</div>

Adesso immaginiamo di poter colorare di arancio lo spazio del testo, di viola il padding (10px), verde il bordo (10px) e di celeste margin (30px), otteniamo come risultato:

Testo, immagini ecc.
altezza
larghezza

Colorando tutti gli spazi occupati dal box possiamo meglio capire come calcolare le sue dimensioni, ottenendo come risultati:
Larghezza = ((30+10+10)*2)+300=400px
Altezza = ((30+10+10)*2)+40=140px