Modello della scatola

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.

Comprendere il modello box di CSS ti aiuterà a capire perché il tuo i contenuti non si adattano all'interno di un elemento.

È 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:

Quando la scatola ha dimensioni estrinseche, c'è una limita la quantità di contenuti che puoi aggiungere prima che trasudano fuori dalla casella. Ciò rende la parola "fantastico" dall'output vocale.

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:

Il dimensionamento estrinseco consente di controllare le dimensioni un elemento. Il dimensionamento intrinseco impedisce l'overflow del testo.

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.

Un diagramma che mostra le quattro aree principali del modello a riquadri: riquadro dei contenuti, riquadro di riempimento, riquadro dei margini e riquadro dei margini
Le quattro aree principali del modello box: content box, spaziatura interna, riquadro bordo e a margine del margine.

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.

Le barre di scorrimento sono visibili nella casella Spaziatura interna.

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 contorno ampio non influisce sulle dimensioni del resto dell'elemento.

Un'analogia utile

Il modello box è complesso da capire, quindi ecco un'analogia con ciò che hai appreso finora.

Tre cornici.
Modello di scatola illustrato utilizzando cornici fisiche.

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:

  1. Apri DevTools.
  2. Seleziona un elemento.
  3. Mostra il debugger del modello a scatola.
di Gemini Advanced.
Il debugger del modello a scatola per la demo struttura.

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?

200px
Poiché il valore predefinito per il dimensionamento dei riquadri è Content-Box, Spaziatura interna e i bordi vengono aggiunti alla larghezza. 200px sarebbe corretto se aveva box-sizing: border-box.
260px
Le dimensioni predefinite delle caselle sono Content-Box, il che significa spaziatura interna e vengono aggiunti bordi al riquadro complessivo.

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 .

Confrontare gli effetti delle dimensioni dei riquadri dei contenuti e dei riquadri dei bordi.
*,
*::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.

Risorse

Fogli di stile dello user agent