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

[paultowery39]

Salve,

cosa sta ad indicare questa proprietà???

*{

box-sizing:border-box;

}

[KillerWorm]

Ciao, molto brevemente, si tratta di una sorta di reset del box model CSS, applicato indistintamente per tutti gli elementi (tramite il selettore universale asterisco).
Il valore di default della proprietà box-sizing è content-box per il quale il box model (l'algoritmo che definisce come gli elementi debbano essere modellati e rappresentati dai browser) esclude l'ingombro dei bordi e del padding dal valore delle dimensioni width ed height di ciascun elemento, determinando quindi le dimensioni in base al contenuto (l'area interna dell'elemento).

Al contrario, border-box fa in modo che nei valori di width ed height siano compresi anche i valori di bordi e padding; di conseguenza la dimensione del contenuto viene calcolata automaticamente sottraendo tali valori

Questi due tipi di comportamento possono influire sostanzialmente sul risultato finale, soprattutto quando si applicano delle dimensioni in percentuale ad elementi nidificati (l'uno dentro l'altro) per cui si deve considerare se escludere o includere l'ingombro di bordi e padding dal calcolo delle dimensioni totali.

In generale il reset del box model può semplificare la costruzione dei layout rendendo il calcolo più intuitivo da parte dello sviluppatore.

Facciamo un semplice esempio; supponi di avere questa struttura HTML:

<div id="esterno">
    <div id="interno">
    </div>
</div>

due semplici div uno dentro l'altro.

Quindi applica questo CSS:

div {
    border: 10px solid green;
    padding: 10px;        
}
#esterno{
    width: 160px;
    height: 160px;
    background: silver;
}
#interno{
    width: 100%;
    height: 100%;
    background: red;
}

dove stai indicando che:
- entrambi i div abbiano un bordo spesso 10px e un padding, lo stesso, 10px
- il div esterno abbia larghezza 160px e altezza 160px
- il div interno abbia larghezza e altezza al 100% della dimensione del genitore (occhio perché quando il valore è in percentuale si riferisce sempre alla dimensione dell'area interna del genitore, quindi al netto di bordi e padding)

Riproducendo questo esempio sul tuo browser puoi notare che qualcosa sembra andare storto: il div interno fuoriesce dal div esterno.
Questo è il normale comportamento del box model in cui la proprietà box-sizing è content-box (valore di default).

Schematizzando l'output:

    ████████████████████████
    ██                    ██
    ██  ████████████████████████
    ██  ██░░░░░░░░░░░░░░░░░░░░██
    ██  ██░░░░░░░░░░░░░░░░░░░░██
    ██  ██░░░░░░░░░░░░░░░░░░░░██
    ██  ██░░░░░░░░░░░░░░░░░░░░██
    ██  ██░░░░░░░░░░░░░░░░░░░░██
    ██  ██░░░░░░░░░░░░░░░░░░░░██
    ██  ██░░░░░░░░░░░░░░░░░░░░██
    ██  ██░░░░░░░░░░░░░░░░░░░░██
    ██  ██░░░░░░░░░░░░░░░░░░░░██
    ██████░░░░░░░░░░░░░░░░░░░░██
        ██░░░░░░░░░░░░░░░░░░░░██
        ████████████████████████

In sostanza stai dicendo che il div esterno deve avere il proprio contenuto (area interna) largo e alto rispettivamente 160px. Infatti la dimensione totale, compresi i bordi e il padding, sarà di 200px, cioè 160 (contenuto) + 20 (cioè 10 + 10 per i due bordi opposti) + 20 (cioè 10 + 10 per i due padding opposti).

Allo stesso modo è calcolata la dimensione del div interno, considerando però che debba essere il 100% di quella dell'area interna del genitore. Per cui il div interno ha un contenuto di 160px, un bordo di 10px e un padding di 10px, quindi una dimensione totale di 200px esattamente come il genitore (div esterno).

Chiaramente il div interno risulta posizionato dentro il div esterno, in alto a sinistra, a partire dal confine tra il padding e l'area dei contenuti; ma essendo di dimensioni maggiori, della stessa area dei contenuti, va a sbordare dal genitore, a destra e in basso.

Per risolvere tutto questo parapiglia puoi aggiungere quella regoletta al CSS di questo stesso esempio:

*{
    box-sizing: border-box;
}

Riproducendo ora l'esempio, puoi notare come il div interno risulti inserito perfettamente nell'area dei contenuti del div esterno. Puoi notare inoltre che il div esterno risulta più piccolo e quello interno, chiaramente, ancora più piccolo.

Schematizzando l'output:

    ████████████████████
    ██                ██
    ██  ████████████  ██
    ██  ██░░░░░░░░██  ██
    ██  ██░░░░░░░░██  ██
    ██  ██░░░░░░░░██  ██
    ██  ██░░░░░░░░██  ██
    ██  ██░░░░░░░░██  ██
    ██  ████████████  ██
    ██                ██
    ████████████████████

Cosa è successo?

Analizzando gli stessi punti visti prima, stai dicendo che il div esterno deve avere la sua dimensione totale (e non il suo contenuto) larga e alta rispettivamente 160px. Per cui la sua area interna (il contenuto), calcolata automaticamente sottraendo bordi e padding, sarà 120px, cioè 160 (totale) - 20 (somma dei due bordi opposti) - 20 (somma dei due padding opposti).

La dimensione del div interno, essendo impostata al 100%, è applicata sempre in base all'area interna del genitore. Per cui il div interno ha, in questo caso, una dimensione totale di 120px (come l'area interna del genitore); di conseguenza, il suo proprio contenuto (cioè la sua area interna) ha una dimensione di 80px calcolata automaticamente sottraendo anche qui i valori di bordi e padding.

Tutto qui

Nota storica:
Tieni presente che "anticamente" non esisteva la proprietà box-sizing e il box model funzionava solo col comportamento di default (che normalmente doveva essere quello dato ora dal valore content-box ma che ogni vendor interpretava a suo piacimento per il proprio browser di turno). Per tale motivo, con i vecchi browser (fino all'epoca di IE7), gli sviluppatori più virgulti di quel tempo si dovevano scervellare con calcoli assurdi per poter ottenere dei layout decenti sui più comuni browser d'allora, o quantomeno evitare che gli elementi esplodessero in composizioni pseudo-cubiste.

La proprietà box-sizing è stata introdotta successivamente proprio per semplificare le cose dando comunque la possibilità di decidere quale tipo di impostazione utilizzare.

I web designer più anziani ringraziano ancora oggi