Il podcast CSS - 001: il modello a riquadri
Supponiamo che tu abbia questo snippet HTML:
<p>I am a paragraph of text that has a few words in it.</p>
Poi scrivi questo CSS:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
I contenuti finiscono per avere una larghezza di 142 px anziché di 100 px, come hai specificato, e vanno oltre l'elemento. Perché?
Il modello a riquadri è un elemento fondamentale del CSS. Comprendere il funzionamento del modello a riquadri, il modo in cui è influenzato da altri aspetti del CSS e, soprattutto, come puoi controllarlo, può aiutarti a scrivere CSS più prevedibili.
È importante ricordare che tutto ciò che viene visualizzato dal CSS è un riquadro, anche se si tratta solo di testo o ha un border-radius che lo fa sembrare un cerchio.
Contenuti e dimensioni
I riquadri hanno un comportamento diverso in base al valore display, alle dimensioni impostate e ai contenuti che contengono. Questi contenuti possono essere testo normale o altri riquadri generati da elementi secondari. In ogni caso, per impostazione predefinita, i contenuti influiscono sulle dimensioni del riquadro.
Puoi controllare questo aspetto utilizzando le dimensioni estrinseche oppure le dimensioni intrinseche per consentire al browser di prendere decisioni in base alle dimensioni dei contenuti.
Ecco una demo di base che spiega la differenza:
La demo contiene le parole "CSS is awesome" in un riquadro con dimensioni fisse e un bordo spesso. Poiché il riquadro ha una larghezza specificata, le sue dimensioni sono estrinseche.
Ciò significa che controlla le dimensioni dei contenuti secondari. Tuttavia, la parola "awesome" è troppo grande per il riquadro, quindi va oltre il riquadro del bordo del riquadro principale (maggiori informazioni in seguito). Un modo per evitare questo overflow è consentire che le dimensioni del riquadro siano intrinseche non impostando la larghezza o, in questo caso, impostando width su min-content. La parola chiave min-content indica al riquadro di avere una larghezza pari alla larghezza minima intrinseca dei contenuti (la parola "awesome"). In questo modo, il riquadro si adatta perfettamente al testo.
Ecco un esempio più complesso che mostra l'impatto di diverse dimensioni sui contenuti reali:
Attiva e disattiva le dimensioni intrinseche per vedere come le dimensioni estrinseche ti offrono un maggiore controllo e come le dimensioni intrinseche danno ai contenuti un maggiore controllo. Per vedere gli effetti, aggiungi alcune frasi di testo alla scheda. Quando questo elemento ha dimensioni estrinseche, c'è un limite alla quantità di contenuti che puoi aggiungere prima che vada oltre il riquadro, ma questo non accade quando le dimensioni intrinseche sono attivate.
Per impostazione predefinita, questo elemento ha una width e un' height di 400px ciascuna.
Queste dimensioni forniscono limiti rigidi a tutto ciò che si trova all'interno dell'elemento, che vengono rispettati a meno che i contenuti non siano troppo grandi per il riquadro. Puoi vedere questo in azione modificando la didascalia sotto l'immagine del fiore con un testo che supera l'altezza del riquadro.
Termine chiave: l'overflow si verifica quando i contenuti sono troppo grandi per il riquadro in cui si trovano. Puoi gestire il modo in cui un elemento gestisce i contenuti in overflow utilizzando la proprietà overflow.
Se passi alle dimensioni intrinseche, il browser prenderà decisioni in base alle dimensioni dei contenuti del riquadro. In questo modo, l'overflow è molto meno probabile perché le dimensioni del riquadro vengono modificate in base ai contenuti.
È importante ricordare che le dimensioni intrinseche sono il comportamento predefinito del browser e di solito offrono molta più flessibilità rispetto alle dimensioni estrinseche.
Le aree del modello a riquadri
I riquadri sono costituiti da aree del modello a riquadri distinte, ognuna con una funzione specifica.
Il riquadro dei contenuti è l'area in cui si trovano i contenuti. I contenuti possono controllare le dimensioni del relativo elemento principale, quindi questa è in genere l'area con le dimensioni più variabili.
Il riquadro del padding circonda il riquadro dei contenuti ed è lo spazio creato da
la proprietà padding.
Poiché il padding si trova all'interno del riquadro, lo sfondo del riquadro è visibile nello spazio che crea.
Se per il riquadro sono impostate regole di overflow, ad esempio overflow: auto o overflow: scroll, anche le barre di scorrimento occupano questo spazio.
Il riquadro del bordo circonda il riquadro del padding e il suo spazio è definito dal
border valore, che
crea una cornice visiva per l'elemento. Il bordo dell'elemento è il limite di ciò che puoi vedere.
L'ultima area, il riquadro del margine, è lo spazio intorno al riquadro, definito dalla
regola margin del riquadro. Anche le proprietà come
outline e
box-shadow
occupano questo spazio perché vengono disegnate sopra l'elemento e non
influincono sulle dimensioni del riquadro. La modifica della outline-width di 200px di un riquadro non cambia nulla all'interno del bordo.
Un'analogia utile
Il modello a riquadri è complesso da comprendere, quindi ecco un'analogia per ciò che hai imparato finora.
In questo diagramma, hai tre cornici montate una accanto all'altra su una parete. Gli elementi dell'immagine incorniciata corrispondono al modello a riquadri come segue:
- Il riquadro dei contenuti è l'opera d'arte.
- Il riquadro del padding è il cartoncino bianco, tra la cornice e l'opera d'arte.
- Il riquadro del bordo è la cornice, che fornisce un bordo letterale per l'opera d'arte.
- Il riquadro del margine è lo spazio tra le cornici.
- L'ombra occupa lo stesso spazio del riquadro del margine.
Eseguire il debug del modello a riquadri
Gli strumenti per sviluppatori del browser forniscono una visualizzazione dei calcoli del modello a riquadri di un riquadro selezionato, che può aiutarti a comprendere il funzionamento del modello a riquadri e il modo in cui influisce sul sito web su cui stai lavorando.
Per provare questa funzionalità in Chrome:
- Apri DevTools.
- Seleziona un elemento.
- Mostra il debugger del modello a riquadri.
Controllare il modello a riquadri
Per capire come controllare il modello a riquadri, devi prima capire cosa succede nel browser.
Ogni browser applica un foglio di stile dello user agent ai documenti HTML. Il foglio di stile definisce l'aspetto e il comportamento degli elementi, se non viene fornito un CSS definito. Il CSS nei fogli di stile dello user agent varia a seconda del browser, ma ogni browser ha impostazioni predefinite che rendono i contenuti più facili da leggere.
Il foglio di stile dello user agent imposta il valore predefinito per gli elementi che accettano display. Ad esempio, il valore display predefinito di un elemento <div> è
block, un <li> ha un valore display predefinito di list-item, e un <span>
ha un valore display predefinito di inline.
Un elemento inline ha un margine di blocco, ma gli altri elementi non lo rispettano.
Con inline-block, gli altri elementi rispettano il margine di blocco, ma il primo
elemento mantiene la maggior parte dei comportamenti che aveva come elemento inline.
Per impostazione predefinita, un elemento block riempie lo spazio in linea disponibile, mentre gli elementi
inline e inline-block sono grandi quanto i relativi contenuti.
Il foglio di stile dello user agent imposta anche i valori predefiniti per box-sizing, che indica a un riquadro come calcolare le dimensioni. Per impostazione predefinita, tutti gli elementi sono impostati su box-sizing: content-box;. Ciò significa che quando imposti dimensioni come width e height, queste dimensioni si applicano al riquadro dei contenuti. Se poi imposti padding e border, questi valori vengono aggiunti alle dimensioni del riquadro dei contenuti.
Mettiti alla prova
Metti alla prova le tue conoscenze sulle proprietà che influiscono sulle dimensioni del modello a riquadri.
.my-box { width: 200px; border: 10px solid; padding: 20px; }
Quale pensi che sarà la larghezza di .my-box?
200px sarebbe corretto se il riquadro avesse box-sizing: border-box.
La larghezza effettiva di questo riquadro è di 260 px.
Poiché il CSS utilizza il valore predefinito box-sizing: content-box, la larghezza applicata è la larghezza dei contenuti e a questa vengono aggiunti padding e border su entrambi i lati. 200 px per i contenuti + 40 px di padding + 20 px di bordo danno una larghezza visibile totale di 260 px.
Puoi modificare questo comportamento specificando le dimensioni border-box:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Questo modello a riquadri alternativo indica al CSS di applicare la width al riquadro del bordo anziché al riquadro dei contenuti. Ciò significa che border e padding vengono
inseriti, quindi quando imposti la larghezza di .my-box su 200px, il rendering effettivo è
di 200px.
Scopri come funziona nella seguente demo interattiva. Quando attivi/disattivi il valore box-sizing, l'area blu mostra il CSS applicato all'interno del riquadro.
*,
*::before,
*::after {
box-sizing: border-box;
}
Questa regola CSS seleziona ogni elemento del documento e ogni pseudo-elemento ::before e ::after e applica box-sizing: border-box.
Ciò significa che ogni elemento ora utilizza questo modello a riquadri alternativo.
Poiché il modello a riquadri alternativo può essere più prevedibile, gli sviluppatori spesso aggiungono questa regola a reset e normalizzatori, ad esempio A (more) Modern CSS Reset.