Podcast CSS - 001: Modello Box
Supponiamo di avere questa porzione di codice HTML:
<p>I am a paragraph of text that has a few words in it.</p>
Quindi scrivi il codice seguente CSS:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
I contenuti finiscono per una larghezza di 142 px, invece dei 100 px che hai specificato, fuori dall'elemento. Perché?
Il modello box è alla base di CSS. Comprendere come il modello box funziona, come dipende da altri aspetti del CSS e, soprattutto, e come controllarlo, può aiutarti a scrivere codice CSS più prevedibile.
È importante ricordare che tutto ciò che viene mostrato in CSS è un riquadro, anche se
è solo del testo o ha un elemento border-radius
che lo rende come un cerchio.
Contenuti e dimensioni
Le caselle hanno un comportamento diverso in base al valore di display
, al relativo insieme
dimensioni e i contenuti che includono. Questi contenuti possono essere in testo normale
altre caselle generate da elementi secondari. In ogni caso, i contenuti influiscono sulle dimensioni
della casella per impostazione predefinita.
Puoi controllare questo comportamento utilizzando il tagliamento estrinseco o il tagliamento intrinseco per consentire al browser di decidere per te in base alle dimensioni dei contenuti.
Ecco una demo di base che spiega la differenza:
La demo contiene le parole "CSS è fantastico" in un riquadro con dimensioni fisse e un
bordo spesso. Poiché la scatola ha una larghezza specifica, ha dimensioni estrinseche.
Ciò significa che controlla le dimensioni dei contenuti secondari. Tuttavia, la parola
"fantastico" è troppo grande per la casella, quindi fuoriesce dall'area esterna della casella principale
border box (ulteriori informazioni in merito più avanti). Un modo per evitare questo overflow è lasciare
la casella può essere dimensionata intrinsecamente non impostando la larghezza o, in questo caso,
Imposto width
su min-content
. La parola chiave min-content
indica al riquadro
avere la stessa larghezza minima 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:
Attiva e disattiva la taglia intrinseca per scoprire in che misura le taglie estrinseche ti danno di più controllo con il dimensionamento estrinseco e il dimensionamento intrinseco dà ai contenuti più controllo. 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 può essere aggiunto prima dell'overflow, ma questo non succede se il dimensionamento intrinseco è attivata.
Per impostazione predefinita, questo elemento ha un insieme di valori width
e height
di 400px
.
Queste dimensioni assegnano limiti rigidi a tutti gli elementi all'interno dell'elemento, ovvero
verranno rispettati, a meno che le dimensioni dei contenuti non siano troppo grandi per essere inseriti nella casella. Puoi vedere come funziona
sostituendo la didascalia sotto l'immagine floreale con qualcosa che supera le
l'altezza della scatola.
Termine chiave: si verifica quando i contenuti sono troppo grandi per la scatola in cui si trovano. Puoi
gestisci il modo in cui un elemento gestisce i contenuti extra usando la proprietà overflow
.
Il passaggio al dimensionamento intrinseco consente al browser di prendere decisioni in base ai tuoi la dimensione dei contenuti della casella. In questo modo si riduce la probabilità di overflow perché la casella viene ridimensionato con i contenuti.
È importante ricordare che le dimensioni intrinseche sono l'impostazione predefinita e di solito offre molta più flessibilità rispetto al dimensionamento estrinseco.
Le aree del modello box
I riquadri sono costituiti da diverse aree di modelli di scatola che svolgono tutte un lavoro specifico.
Il riquadro dei contenuti è l'area in cui si trovano i contenuti. I contenuti possono controlla le dimensioni dell'elemento principale, per cui di solito è l'area con dimensioni più variabili.
La casella di riempimento circonda la casella dei contenuti ed è lo spazio creato dalla
la proprietà padding
.
Poiché la spaziatura interna è all'interno del riquadro, lo sfondo di quest'ultima è visibile nello spazio.
che crea.
Se per la casella sono impostate regole di overflow, ad esempio overflow: auto
o
overflow: scroll
, anche le barre di scorrimento occupano questo spazio.
Il riquadro di bordo circonda la casella di spaziatura e il suo spazio è definito dal
border
, che
crea una cornice visiva per l'elemento. Il bordo del bordo dell'elemento è
il limite di ciò che puoi vedere.
L'area finale, la casella margine, è lo spazio attorno al rettangolo, definito dal
regola margin
della casella. Proprietà come
outline
e
box-shadow
occupano anche questo spazio perché sono dipinti sopra l'elemento e non
influire sulle dimensioni della scatola. Modifica di outline-width
di 200px
della casella il giorno
una casella non modifica nulla all'interno del bordo del bordo.
Un'analogia utile
Il modello box è complesso da capire, quindi ecco un'analogia con ciò che hai appreso finora.
In questo diagramma, ci sono tre cornici montate una accanto all'altra su una parete. Gli elementi dell'immagine incorniciata corrispondono al modello a scatola come segue:
- La casella dei contenuti corrisponde all'artwork.
- La scatola di riempimento è la tavola di montaggio bianca, tra la cornice e l'illustrazione.
- La cornice è 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 del modello a box di un riquadro selezionato , che possono aiutarti a capire come funziona il modello box e come incide sul sito web su cui stai lavorando.
Procedi nel seguente modo nel tuo browser:
- Apri DevTools.
- Seleziona un elemento.
- Mostra il debugger del modello a scatola.
Controlla il modello a scatola
Per capire come controllare il modello box, devi prima capire cosa avvengono nel 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 in i fogli di stile dello user agent variano da browser a browser, ma forniscono informazioni per semplificare la lettura dei contenuti.
Una proprietà in cui il foglio di stile dello user agent imposta il valore predefinito di una casella (display
). Per
Ad esempio, in un flusso normale, il valore predefinito di display
di un elemento <div>
è
block
, un <li>
ha un valore predefinito di display
di list-item
e un <span>
ha un valore predefinito di display
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 del blocco, ma il primo
mantiene la maggior parte degli stessi comportamenti di un elemento inline
.
Per impostazione predefinita, un elemento block
riempie lo spazio in linea disponibile, mentre
Gli elementi inline
e inline-block
hanno le stesse dimensioni dei relativi contenuti.
Il foglio di stile dello user agent imposta anche box-sizing
, che indica a una casella come
calcolare le dimensioni della scatola. Per impostazione predefinita, tutti gli elementi hanno il seguente user agent
stile: box-sizing: content-box;
. Ciò significa che quando imposti dimensioni come
come width
e height
, queste dimensioni si applicano al riquadro dei contenuti. Se
quindi imposti padding
e border
, questi valori vengono aggiunti al campo
dimensioni.
Verifica le tue conoscenze
Verifica le tue conoscenze sulle dimensioni del modello box che influiscono sulle proprietà.
.my-box { width: 200px; border: 10px solid; padding: 20px; }
Quanto pensi che sarà larga .my-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 e padding
e border
su entrambi i lati vengono aggiunti
quello. 200 px per i contenuti + 40 px di spaziatura interna + 20 px di bordo per calcolare il totale
Larghezza visibile 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 box alternativo indica al CSS di applicare width
al riquadro di bordo
anziché nella casella dei contenuti. Ciò significa che border
e padding
ricevono
è inserito, quindi quando imposti .my-box
su 200px
di larghezza, in realtà il rendering viene eseguito
con larghezza: 200px
.
Scopri come funziona nella demo interattiva seguente. Quando attivi/disattivi
box-sizing
, l'area blu mostra quale CSS viene applicato all'interno del
.
*,
*::before,
*::after {
box-sizing: border-box;
}
Questa regola CSS seleziona ogni elemento del documento
e ogni pseudoelemento ::before
e ::after
e applica box-sizing: border-box
.
Ciò significa che ogni elemento ora utilizza questo modello di box alternativo.
Poiché il modello box alternativo può essere più prevedibile, gli sviluppatori spesso aggiungono questa regola per ripristini e normalizzatori, come questa.