Podcast CSS - 001: The Box Model
Supponiamo che tu abbia questa porzione di HTML:
<p>I am a paragraph of text that has a few words in it.</p>
Quindi scrivi questo CSS:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
I contenuti raggiungono una larghezza di 142 px, invece dei 100 px che hai specificato, e si disconnettono dall'elemento. Perché?
Il modello a riquadro è una base fondamentale del CSS. Capire come funziona il modello a scatola, in che modo è influenzato da altri aspetti del CSS e, soprattutto, come puoi controllarlo, può aiutarti a scrivere codice CSS più prevedibile.
È importante ricordare che tutto ciò che viene visualizzato dal CSS è una casella, anche se si tratta solo di testo, o ha un border-radius che lo fa sembrare un cerchio.
Contenuti e dimensioni
Le caselle hanno un comportamento diverso in base al valore display, alle dimensioni del set e ai contenuti che contengono. Può trattarsi di testo normale o
più riquadri generati da elementi secondari. In ogni caso, le dimensioni della scatola
influiscono sui contenuti per impostazione predefinita.
Puoi controllare questa opzione utilizzando le dimensioni estrinseche oppure puoi utilizzare le dimensioni intrinseche per consentire al browser di prendere decisioni per te in base alle dimensioni dei contenuti.
Ecco una demo di base che spiega la differenza:
La demo presenta le parole "CSS è fantastico" in una casella con dimensioni fisse e
bordo spesso. Poiché la casella ha una larghezza specificata, le dimensioni sono estrinsecamente.
Ciò significa che controlla le dimensioni dei relativi contenuti secondari. Tuttavia, la parola "fantastico" è troppo grande per essere inserita nella casella, quindi supera il riquadro bordo della casella principale (scoprirai di più più avanti). Un modo per evitare questo overflow è consentire le dimensioni intrinseche della casella non impostando la larghezza o, in questo caso, impostando width su min-content. La parola chiave min-content indica alla casella di avere la stessa larghezza intrinseca dei suoi contenuti (la parola "Fantastico"). In questo modo la casella si adatta perfettamente al testo.
Ecco un esempio più complesso che mostra l'impatto di dimensioni diverse sui contenuti reali:
Attiva e disattiva il dimensionamento intrinseco per vedere come il dimensionamento estrinseco offre un maggiore controllo, grazie a dimensioni estrinseche e intrinseche per un maggiore controllo sui contenuti. Per vedere gli effetti, aggiungi alcune frasi di testo alla scheda. Quando questo elemento ha dimensioni estrinseche, esiste un limite alla quantità di contenuti che puoi aggiungere prima dell'overflow, ma ciò non si verifica quando il dimensionamento intrinseco è attivato.
Per impostazione predefinita, questo elemento ha un insieme di width e height di 400px ciascuno.
Queste dimensioni conferiscono limiti rigorosi a tutti i contenuti all'interno dell'elemento, che vengono rispettati, a meno che i contenuti non siano troppo grandi per il riquadro. Puoi vederlo in azione modificando la didascalia sotto l'immagine dei fiori con qualcosa che superi l'altezza della scatola.
Termine chiave: l'overflow si verifica quando i contenuti sono troppo grandi per la scatola in cui si trovano. Puoi
gestire il modo in cui un elemento gestisce i contenuti extra utilizzando la proprietà overflow.
Il passaggio al dimensionamento intrinseco consente al browser di prendere decisioni automaticamente in base alle dimensioni dei contenuti del riquadro. Ciò rende molto meno probabile l'overflow, perché il riquadro viene ridimensionato con il contenuto.
È importante ricordare che il dimensionamento intrinseco è il comportamento predefinito del browser e di solito offre molta più flessibilità rispetto al dimensionamento estrinseco.
Le aree del modello a scatola
Le caselle sono composte da aree distinte dei modelli di riquadri che svolgono tutte un lavoro specifico.
Il riquadro dei contenuti è l'area in cui si trovano i contenuti. Il contenuto può controllare le dimensioni dell'elemento principale, che di solito è l'area con dimensioni più variabili.
La casella di riempimento circonda la casella dei contenuti ed è lo spazio creato dalla
proprietà padding.
Poiché la spaziatura interna si trova all'interno della casella, lo sfondo della casella è visibile nello spazio che crea.
Se nella casella sono state impostate regole di overflow, come overflow: auto o
overflow: scroll, anche le barre di scorrimento occupano questo spazio.
La casella bordo circonda la casella di spaziatura e il suo spazio è definito dal valore border, che crea una cornice visiva per l'elemento. Il bordo dell'elemento rappresenta il
limite di ciò che puoi vedere.
L'area finale, la casella a margine, è lo spazio attorno alla casella, definito dalla regola margin della casella. Anche proprietà come
outline e
box-shadow
occupano questo spazio perché sono colorate sopra l'elemento e non
influiscono sulle dimensioni del riquadro. La modifica del outline-width di 200px della casella in una casella non comporta modifiche all'interno del bordo del bordo.
Un'analogia utile
Il modello box è complesso da comprendere, quindi ecco un'analogia per ciò che hai imparato finora.
In questo diagramma, ci sono tre cornici montate una accanto all'altra su una parete. Gli elementi dell'immagine inquadrata corrispondono al modello della scatola come segue:
- Il riquadro dei contenuti è l'artwork.
- La scatola di imbottitura è la scheda di montaggio bianca, tra la cornice e l'illustrazione.
- La casella del bordo è la cornice che fornisce un bordo letterale per l'artwork.
- La casella a margine è lo spazio tra i frame.
- L'ombra occupa lo stesso spazio della casella a margine.
Esegui il debug del modello box
Browser DevTools fornisce una visualizzazione dei calcoli del modello a scatola di una casella selezionata, utile per capire come funziona il modello a riquadro e come influisce sul sito web su cui stai lavorando.
Prova a utilizzare questo metodo nel tuo browser:
- Apri DevTools.
- Seleziona un elemento.
- Mostra il debugger del modello riquadro.
Controlla il modello della scatola
Per capire come controllare il modello box, devi prima capire cosa succede nel tuo browser.
Ogni browser applica un foglio di stile dello user agent ai documenti HTML che definisce l'aspetto e il comportamento degli elementi se non hanno CSS definito. Il CSS nei fogli di stile dello user agent varia da un browser all'altro, ma fornisce valori predefiniti appropriati per facilitare la lettura dei contenuti.
Una proprietà per cui il foglio di stile dello user agent imposta un valore predefinito di casella (display). Ad esempio, in un flusso normale, il valore display predefinito di un elemento <div> è block, <li> ha un valore display predefinito di list-item e <span> ha un valore predefinito di display pari a inline.
Un elemento inline ha un margine del blocco, ma gli altri elementi non lo rispettano.
Con inline-block, altri elementi rispettano il margine del blocco, ma il primo elemento mantiene gli stessi comportamenti che aveva un elemento inline.
Per impostazione predefinita, un elemento block riempie lo spazio in linea disponibile, mentre gli elementi inline e inline-block hanno dimensioni pari solo a quelle dei relativi contenuti.
Il foglio di stile dello user agent imposta anche box-sizing, che indica a una casella come calcolare le dimensioni della casella. Per impostazione predefinita, tutti gli elementi hanno il seguente stile user agent: box-sizing: content-box;. Ciò significa che quando imposti dimensioni come
width e height, queste vengono applicate al riquadro dei contenuti. Se imposti padding e border, questi valori vengono aggiunti alle dimensioni della casella di contenuti.
Verifica le tue conoscenze
Verifica le tue conoscenze delle dimensioni del modello a scatola che influiscono sulle proprietà.
.my-box {
width: 200px;
border: 10px solid;
padding: 20px;
}
Quale larghezza pensi che avrà .my-box?
200px sarebbe corretto se la
casella avesse box-sizing: border-box.
La larghezza effettiva di questo riquadro è 260 px.
Poiché il CSS utilizza il valore predefinito box-sizing: content-box, la larghezza applicata è
la larghezza dei contenuti, a cui vengono aggiunti padding e border su entrambi i lati. 200 px per i contenuti + 40 px di spaziatura interna + 20 px di bordo rende visibile una larghezza totale di 260 px.
Puoi modificare questa impostazione specificando le dimensioni border-box:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Questo modello di riquadro alternativo indica al CSS di applicare width alla casella del bordo anziché alla casella dei contenuti. Questo significa che border e padding vengono
inviati, quindi se imposti .my-box in modo che siano estesi a 200px, in realtà il rendering
viene visualizzato con larghezza 200px.
Scopri come funziona nella demo interattiva che segue. Quando attivi/disattiva il valore box-sizing, l'area blu mostra il CSS applicato all'interno della casella.
*,
*::before,
*::after {
box-sizing: border-box;
}
Questa regola CSS seleziona ogni elemento del documento
e ogni pseudo elemento ::before e ::after, quindi applica box-sizing: border-box.
Ciò significa che ogni elemento utilizza questo modello box alternativo.
Poiché il modello a scatola alternativo può essere più prevedibile, gli sviluppatori spesso aggiungono questa regola per reimpostazioni e normalizzatori, come in questo caso.