Domare il Box Model non è stato facile!
Chi programma sul web da molti anni, sa benissimo quanto abbiamo penato per gestire i layout in modo uniforme tra i differenti browser e le piattaforme.
A complicarci la vita, in primis, è stato il Box Model.
Senza addentrarmi in modo specifico nella spiegazione del Box Model, questo articolo, evidenzia un modo per gestirlo in maniera naturale.
Box Model – definizione
Il Box Model è l’insieme di un elemento Html comprendente contenuto, margini, bordi e padding.
Prima dei Css3, per calcolare la larghezza totale di un elemento, in linea di massima dovevamo sommare le quattro dimensioni.
Box Model – come domarlo
Ora, invece, grazie alla regola “box-sizing”, la larghezza totale dell’elemento è calcolata in automatico.
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:
border-box;
}
Mi sembra superfluo sottolineare quanto questo ci ha facilitato la vita di programmatori.
Approfondisci:
http://www.html.it/pag/14223/il-box-model/
http://www.html.it/pag/19463/box-sizing/