The CSS Podcast - 001: The Box Model
Supponiamo che tu abbia questo frammento di codice 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é i 100 px specificati, e escono dall'elemento. Perché?
Il modello a scatola è una base fondamentale del CSS. Comprendere il funzionamento del modello a scatola, come viene influenzato da altri aspetti del CSS e, soprattutto, come controllarlo può aiutarti a scrivere CSS più prevedibili.
È importante ricordare che tutto ciò che viene visualizzato da CSS è una casella, anche se
si tratta solo di testo o ha un border-radius che lo fa sembrare un cerchio.
Contenuti e dimensionamento
Le caselle hanno un comportamento diverso in base al valore display, alle dimensioni impostate e ai contenuti che contengono. Questi contenuti potrebbero essere testo normale o
più caselle generate da elementi secondari. In entrambi i casi, i contenuti influiscono sulle dimensioni
della casella per impostazione predefinita.
Puoi controllare questo aspetto utilizzando il dimensionamento estrinseco oppure puoi utilizzare il dimensionamento intrinseco per lasciare che il browser prenda decisioni per te in base alle dimensioni dei contenuti.
Ecco una demo di base che spiega la differenza:
La demo contiene le parole "CSS is awesome" (CSS è fantastico) in una casella con dimensioni fisse e un
bordo spesso. Poiché la casella ha una larghezza specificata, le sue dimensioni sono estrinseche.
Ciò significa che controlla il dimensionamento dei contenuti secondari. Tuttavia, la parola
"fantastico" è troppo grande per la casella, quindi esce dalla
casella di confine della casella principale (ne parleremo più avanti). Un modo per evitare questo overflow è consentire
il dimensionamento intrinseco della casella non impostando la larghezza o, in questo caso,
impostando width su min-content. La parola chiave min-content indica alla casella di
essere larga solo quanto la larghezza minima intrinseca del suo contenuto (la parola
"fantastico"). In questo modo, la casella si adatta perfettamente al testo.
Ecco un esempio più complesso che mostra l'impatto delle diverse dimensioni sui contenuti reali:
Attiva e disattiva il dimensionamento intrinseco per vedere come il dimensionamento estrinseco ti offre un maggiore controllo e come il dimensionamento intrinseco offre ai contenuti un maggiore controllo. Per vedere gli effetti, aggiungi alcune frasi di testo alla scheda. Quando questo elemento ha un dimensionamento estrinseco, esiste un limite alla quantità di contenuti che puoi aggiungere prima che si verifichi un overflow, ma ciò non accade quando il dimensionamento intrinseco è attivato.
Per impostazione predefinita, questo elemento ha un width e un height di 400px ciascuno.
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 la casella. Puoi vedere questo in azione
modificando la didascalia sotto l'immagine del fiore con un testo che supera
l'altezza della casella.
Termine chiave: l'overflow si verifica quando i contenuti sono troppo grandi per la casella in cui si trovano. Puoi
gestire il modo in cui un elemento gestisce i contenuti in eccesso utilizzando la proprietà overflow.
Il passaggio al dimensionamento intrinseco consente al browser di prendere decisioni in base alle dimensioni dei contenuti della casella. In questo modo, il rischio di overflow è molto meno probabile perché la casella viene ridimensionata in base ai contenuti.
È 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 scatole sono costituite da aree distinte del modello di scatola, ognuna delle quali svolge una funzione specifica.
La casella dei contenuti è l'area in cui si trovano i contenuti. I contenuti possono controllare le dimensioni del contenitore principale, quindi questa è in genere l'area con le dimensioni più variabili.
La casella di spaziatura interna circonda la casella dei contenuti ed è lo spazio creato dalla proprietà
padding.
Poiché il padding si trova all'interno della casella, lo sfondo della casella è visibile nello spazio
che crea.
Se la casella ha impostato 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 di riempimento e il suo spazio è definito dal valore
border, che
crea una cornice visiva per l'elemento. Il bordo del bordo dell'elemento è il limite di ciò che puoi vedere.
L'ultima area, la casella del margine, è lo spazio intorno alla casella, definito dalla regola margin della casella. Anche proprietà come
outline e
box-shadow
occupano questo spazio perché vengono disegnate sopra l'elemento e non
influenzano le dimensioni della casella. La modifica del outline-width di 200px di una casella non cambia nulla all'interno del bordo.
Un'analogia utile
Il modello a scatola è complesso da capire, quindi ecco un'analogia per ciò che hai imparato finora.
In questo diagramma, tre cornici sono montate una accanto all'altra su una parete. Gli elementi dell'immagine incorniciata corrispondono al modello di riquadro nel seguente modo:
- La casella dei contenuti è la copertina.
- Il riempimento è il cartone di montaggio bianco, tra la cornice e l'opera.
- Il riquadro di selezione è la cornice che fornisce un bordo letterale per l'artwork.
- La casella del margine è lo spazio tra i frame.
- L'ombra occupa lo stesso spazio della casella del margine.
Eseguire il debug del modello di riquadro
Gli strumenti per sviluppatori del browser forniscono una visualizzazione dei calcoli del box model di una casella selezionata, il che può aiutarti a capire come funziona il box model e come 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 scatola.
Controllare il modello di casella
Per capire come controllare il modello a scatola, devi prima capire cosa succede nel browser.
Ogni browser applica un foglio di stile 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 user agent varia in base al browser, ma ogni browser ha impostazioni predefinite che rendono i contenuti più facili da leggere.
Il foglio di stile dell'user agent imposta il valore predefinito per gli elementi che accettano
display. Ad esempio, il valore predefinito di display di un elemento <div> è
block, un <li> ha un valore predefinito di display pari a list-item e un <span>
ha un valore predefinito di display pari a inline.
Un elemento inline ha un margine di blocco, ma altri elementi non lo rispettano.
Con inline-block, gli altri elementi rispettano il margine del blocco, ma il primo
elemento mantiene la maggior parte dei comportamenti che aveva come elemento inline.
Un elemento block riempie lo spazio in linea disponibile per impostazione predefinita, mentre gli elementi inline e inline-block sono grandi quanto i loro contenuti.
Il foglio di stile dell'user agent imposta anche i valori predefiniti per box-sizing, che indica a
una casella come calcolare le sue 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 alla casella dei contenuti. Se
poi imposti padding e border, questi valori vengono aggiunti alle
dimensioni della casella dei contenuti.
Verifica la tua comprensione
Metti alla prova le tue conoscenze sulle proprietà che influiscono sulle dimensioni del modello di riquadro.
.my-box { width: 200px; border: 10px solid; padding: 20px; }
Quanto pensi che sarà largo .my-box?
200px sarebbe corretto se la
casella avesse box-sizing: border-box.
La larghezza effettiva di questa casella è 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 per una larghezza
visibile totale di 260 px.
Puoi modificare questa opzione specificando il dimensionamento di border-box:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Questo modello di casella alternativo indica al CSS di applicare width alla casella del bordo
anziché alla casella dei contenuti. Ciò significa che i nostri border e padding vengono
inseriti, quindi quando imposti .my-box su una larghezza di 200px, il rendering viene eseguito
a una larghezza 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 della
casella.
*,
*::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 di scatola alternativo.
Poiché il modello di scatola alternativo può essere più prevedibile, gli sviluppatori spesso aggiungono questa regola ai reset e ai normalizzatori, come questo.