CodeGym/Corsi/Frontend SELF IT/Modello di contenuto e bordi

Modello di contenuto e bordi

Disponibile

4.1 Proprietà box-sizing

La proprietà box-sizing in CSS è uno strumento potente per gestire il modello di misurazione delle dimensioni degli elementi. Definisce come vengono calcolate le dimensioni di un elemento, inclusa la larghezza e l'altezza, nonché margini, bordi e margini esterni. Di seguito esamineremo in dettaglio come funziona box-sizing e come il suo utilizzo può influenzare il layout di una pagina web.

Modelli principali di box-sizing

Content-box (modello di contenuto)

Il valore content-box è il valore predefinito per tutti gli elementi. In questo modello le dimensioni dell'elemento (width e height) determinano solo le dimensioni del contenuto, escludendo margini e bordi. Ciò significa che margini e bordi vengono aggiunti alla larghezza e all'altezza complessive dell'elemento.

Border-box (modello di bordi)

Il valore border-box modifica il modello di misurazione in modo che le dimensioni dell'elemento (width e height) includano margini e bordi. Ciò significa che margini e bordi fanno parte della larghezza e dell'altezza complessive dell'elemento, semplificando i calcoli e la gestione delle dimensioni dell'elemento.

Esempio di utilizzo di box-sizing:

CSS
.box {
  background-color: #3498db;
  color: white;
  padding: 20px;
  border: 5px solid #2c3e50;
  margin: 10px;
  width: 200px;
  height: 100px;
}

.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}
HTML
<div class="box content-box">Content-box: larghezza e altezza includono solo il contenuto.</div>
<div class="box border-box">Border-box: larghezza e altezza includono margini e bordi.</div>

Spiegazione del codice:

  • .box: stile di base per tutte le scatole, inclusi margini, bordi e dimensioni
  • .content-box: elemento con box-sizing: content-box, dove larghezza e altezza includono solo il contenuto
  • .border-box: elemento con box-sizing: border-box, dove larghezza e altezza includono margini e bordi

4.2 Impatto di box-sizing sul layout

Modello di contenuto (Content-box)

Quando si utilizza box-sizing: content-box;, margini e bordi vengono aggiunti alla larghezza e all'altezza complessive dell'elemento. Ciò può portare alla necessità di ulteriori considerazioni quando si calcolano le dimensioni e il posizionamento degli elementi.

Esempio di utilizzo

In questo caso la larghezza complessiva dell'elemento sarà 200px + 20px (padding) * 2 + 5px (border) * 2 = 250px, e l'altezza complessiva sarà 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px.

CSS
.content-box {
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #000;
}
HTML
<div class="box content-box">Content-box: larghezza e altezza includono solo il contenuto.</div>

Modello di bordi (Border-box)

Quando si utilizza box-sizing: border-box;, margini e bordi sono inclusi nella larghezza e altezza specificate dell'elemento. Ciò semplifica i calcoli e la gestione delle dimensioni dell'elemento, soprattutto quando si creano layout adattivi.

Esempio di utilizzo:

CSS
.border-box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #000;
}
HTML
<div class="box border-box">Border-box: larghezza e altezza includono margini e bordi.</div>

4.3 Creazione di layout adattivi

L'utilizzo di box-sizing: border-box; consente di semplificare la creazione di layout adattivi, poiché le dimensioni degli elementi includono margini e bordi, prevenendo fuoriuscite inaspettate.

Esempio di utilizzo:

CSS
* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background-color: #f4f4f4;
}

.item {
  flex: 1 1 calc(33.333% - 20px);
  padding: 20px;
  border: 5px solid #3498db;
  background-color: #fff;
}
HTML
<div class="container">
  <div class="item">Elemento 1</div>
  <div class="item">Elemento 2</div>
  <div class="item">Elemento 3</div>
  <div class="item">Elemento 4</div>
  <div class="item">Elemento 5</div>
  <div class="item">Elemento 6</div>
</div>

Spiegazione del codice:

  • * { box-sizing: border-box; }: applicare il modello di bordi a tutti gli elementi sulla pagina per semplificare la gestione delle dimensioni
  • .container: Contenitore Flex con layout adattivo
  • .item: Elementi Flex con distribuzione uniforme della larghezza e inclusione di padding e border nella larghezza complessiva

4.4 Dimensioni fisse con margini interni

L'utilizzo di box-sizing: border-box; consente di impostare facilmente dimensioni fisse per gli elementi con margini interni, senza preoccuparsi di fuoriuscite.

Esempio di utilizzo:

CSS
.fixed-size {
  box-sizing: border-box;
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid #2ecc71;
  background-color: #ecf0f1;
  text-align: center;
  line-height: 150px; /* Centrare il testo verticalmente */
}
HTML
<div class="fixed-size">
  Dimensioni fisse
</div>

Spiegazione del codice:

  • .fixed-size: elemento con dimensioni fisse di 300x150 pixel, inclusi padding e border, che consente un controllo preciso delle sue dimensioni
1
Compito
Frontend SELF IT,  livello 16lezione 4
Bloccato
Modello box-sizing
Modello box-sizing
1
Compito
Frontend SELF IT,  livello 16lezione 4
Bloccato
Dimensioni fisse
Dimensioni fisse
Commenti
  • Popolari
  • Nuovi
  • Vecchi
Devi avere effettuato l'accesso per lasciare un commento
Questa pagina non ha ancora commenti