Proprietà *{box-sizing: border-box}

[Kiiiilige]

Salve,

cosa sta ad indicare questa proprietà???

*{

box-sizing:border-box;

}

[KillerWorm]

Salve e benvenuto.

cosa sta ad indicare questa proprietà???

E' ciò che in gergo tecnico viene definito "CSS box model reset".

In poche parole: il normale meccanismo di calcolo delle geometrie di un elemento HTML rappresentato attraverso il CSS (appunto, "CSS box model"), non include gli "ingombri" di padding e border, ma solo del contenuto interno dell'elemento stesso.

Il valore di default della proprietà "box-sizing" è infatti "content-box". Ciò significa che impostando, ad esempio, width:100px ad un elemento, la sua larghezza totale sarà 100px (riferita al suo contenuto interno) più gli eventuali ingombri dati dalle dimensioni del padding e dei bordi. Per cui l'elemento in sé occuperà più di 100px se padding e border sono maggiori di 0.

Impostando invece il valore "border-box" sono inclusi padding e border, per cui la larghezza totale dell'elemento sarà esattamente 100px.

Chiaramente ci possono essere specifiche situazioni, più o meno complesse, in cui si può preferire un approccio piuttosto che l'altro. In genere, per quelli che possono essere i moderni canoni dei layout HTML, si tende ad usare "border-box" su tutti gli elementi.

In quella regola, il selettore asterisco (*) indica "qualsiasi elemento", per cui il "reset" è applicato a tutti gli elementi nel documento. Tale proprietà in genere viene estesa anche agli pseudo elementi (di norma non compresi dal selettore asterisco) in una forma del genere:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Per ulteriori informazioni posso consigliarti di fare qualche ricerca con i termini chiave indicati: "CSS box model reset"

Tra i link utili CSS (discussione in evidenza) puoi trovare vari riferimenti a guide e documentazioni riguardo il box model: vedi "Come funzionano i CSS – concetti e meccanismi di funzionamento" sotto la voce "Box model".

Buon proseguimento.



[Mod] Quando posti del codice sul forum è opportuno usare gli appositi tag di formattazione (vedi regolamento di sezione). Per ora ho corretto io, fai attenzione in futuro. Grazie.

[Kiiiilige]

Grazie!