Box model

In un documento HTML, ogni elemento è rappresentato da un box rettangolare. Determinare la dimensione, le propietà — come il colore, il background, l'aspetto del bordo — e la posizione di questi box è l'obiettivo del rendering engine. In CSS, ciascuno di questi box rettangolari è descritto utilizzando lo standard box model. Questo modello descrive il contenuto dello spazio che ogni elemento occupa.

Il CSS box model rappresenta le fondamento del layout. Il layout è ciò che permette di modificare la presentazione della struttura del documento stesso. Prima di tuffarsi nel layout, occorre incominciare a capire i box.

Propietà dei Box

Ogni elemento all'interno di un documento genera un box che può essere gestito utilizzando alcune specifiche propietà CSS. Queste propietà possono essere rappresentate come segue:

Il riquadro del contenuto (content box)

Il content box è dove il contenuto dell'elemento è mostrato, il contenuto può essere del testo oppure un altro box da unelemento figlio. La dimensione del content box è impostata attraverso le propietà width e height.

Esistono altre propietà che permettono metodi più sofisticati di gestione della dimensione del content box, impostandovincoli piuttosto che dimensioni assolute. Questo può essere fatto attraverso le propietà: min-width / max-width, e min-height / max-height

Il riquadro del padding (padding box)

Il padding box rappresenta il margine interno di un box, cioè la distanza tra il riquadro del contenuto (content box) ed il bordo (border). Tale distanza è impostata con la propietà padding. Questa propietà è una propietà scorciatoia, il suo valore è infatti una fusione dei valori di 4 altre propietà separate da uno spazio: padding-top, padding-right, padding-bottom e padding-left (in questo ordine).

Il bordo (border)

Il bordo è una zona, visibile oppure no, che rappresenta il bordo reale del box. Per default il bordo ha una dimensione di 0 che lo rende invisibile. Il bordo è impostato con la propietà CSS border. E' anche una propietò scorciatoia che è una fusione di border-size (lo spessore del bordo), border-style (il vero stile della linea del bordo, tipicamente solid), e border-color. E' anche possibile impostare ogni bordo in maniera indipendente, quindi esiste un set di propietà border-* per ciascun bordo (top, right, bottom, left).

Il margine esterno (outer margin)

Il margine rappresenta la distanza che può essere impostata tra due box. E' posta all'estrno del bordo del box e si comporta come il padding ma questa volta la propietà scorciatoia è margin e le propietà individuali sono margin-top, margin-right, margin-bottom, e margin-left.

I margini hanno un comportamento specifico denominato margin collapsing: Quando due box si susseguono, la distanza tra loro è il valore del più grande tra i due margini adiacenti (e non la somma dei due margini adiacenti)

Vediamo un esempio:

HTML (utilizzeremo la stessa sorgente HTML in tutti i nostri esempi) :

<p>I'm a paragraph</p>
<p>I'm another paragraph</p>

CSS:

/* For all paragraphs */
p {
  /* They have an exact width of 100px */
  width: 100px;

  /* Their height is set automatically based
     on the inner size of the content itself */
  height: auto;

  /* The distance between the content and the
     border is of 20px on the left and right
     and is of 10px on the top and bottom */
  padding: 10px 20px 10px 20px;

  /* We set a uniform black border of 5 pixels */
  border: 5px solid black;

  /* The minimum distance between a paragraph and
     another box stack above or below it is 20px */
  margin: 20px 0 20px 0;
}

Risultato:

Aside interaction

Manipolare i box in CSS non significa solamente impostare la loro dimensione, ma anche renderli fantasiosi e reattivi.

Overflow

Quando imposti la dimensione dei box icon valori assoluti, a volte, il contenuto non entra nella dimensione permessa. In questi casi il contenuto esce fuori dal box. Per controllare ciò chee succede in questi casi, abbiamo a disposizione la propietà overflow. Può avere alcuni valori possibili, ma i più comuni sono:

• auto : se è presente troppo contenuto, quest'ultimo è tagliato e barre di scorrimento verranno mostrate per permettere all'utente di visionare tutto il contenuto.
• hidden : se è presente troppo contenuto, quest'ultimo è tagliato.
• visible : se è presente troppo contenuto, tuttto ciò che eccede è mostrato al di fuori del box (questo è normalmente il comportamento di default).

Di seguito un semplice esempio:

HTML:

<p class="autoscroll">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="clipped">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="default">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

CSS:

p {
  width  : 400px;
  height : 2.5em;
  padding: 1em 1em 1em 1em;
  border : 1px solid black;
}

.autoscroll { overflow: auto;    }
.clipped    { overflow: hidden;  }
.default    { overflow: visible; }

Risultato:

Background

Modificare il background ci permettere di rendere i box più creativi. come utilizzare il background è un argomento a se stante, quì vogliamo solo discutere dell'interazione tra il background ed i box. I possibili sfondi (backgrounds) possono essere colori e immagini impilati gli uni sugli altri. Si applicano ad un box e sono disegnati sotto di esso. Per default, gli sfondi (backgrounds) sono posti sotto il content box, il padding ed i bordi. Con un colore non ci sono in genere dei problemi, ma con un'immagine può essere importante evitere alcuni effetti visuali collaterali.

Tra le varie propietà per la gestione degli sfondi (background), una indica quale parte del box model deve essere considerata per l'applicazione del background: background-clip

Un esempio grafico ci mostra la spiegazione di tale propietà:

HTML:

<div class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

CSS:

div {
  width  : 60px;
  height : 60px;
  border : 20px solid rgba(0, 0, 0, 0.5);
  padding: 20px;
  margin : 20px 0;

  background-size    : 140px;
  background-position: center;
  background-image   : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
  background-color   : gold;
}

.default     { background-clip: border-box;  }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

Risultato:

Outline

Ultima ma non meno importante, l' outline somiglia ad un bordo ma non è parte del box model. Si comporta come un bordo ma è disegnata sopra al box senza modificarne la dimensione (per essere precisi, l'outline è disegnata all'esterno del border-box, all'interno dell'area del margine).

Tipi di box

Tutto ciò che abbiamo detto finore si applica ai box che sono elementi di blocco (block). Tuttavia, CSS ha altri tipi di box che si comportano in maniera differente. Il tipo di box applicato ad un elemento è determinato dalla propietà display. CSS rende disponibili molti valori, ma in questo articolo, ci focalizzeremo su tre tipi di base: block, inline, ed inline-block.

• Un elemento di blocco block è definito come un box impilato sopra altri box (i.e. crea un'interruzione di linea prima e dopo il box) ed il box model visto precedentemente si applica ad esso.
• Un elemento inline è l'opposto dell'elemento di blocco: scorre con il flusso del testo (i.e. non crea un'interruzione di riga prima e dopo ed il contenuto si divide secondo il contenuto che lo circonda). Le propietà del box model si applicano ad esso, ma non hanno impatto sui box vicini.
• Un elemento inline-block è qualcosa che sta a metà: scorre con il testo del documento senza creare interruzioni di riga prima e dopo, inoltre è auto-contenuto e non segue le regole di divisione dall'esterno del box, infine tutte le propietà del box model si applicano ad esso ed hanno impatto sui box vicini.

Confuso? Vediamo qualche esempio:

HTML:

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

CSS:

p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  padding : 0.5em;
  border  : 1px solid green;

  /* Questo rende il box visibile, indipendentemente dal tipo */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

Risultato:

Cos'altro?

A questo punto, dovresti prenderti un po' di tempo per acquisire familiarità con i box CSS, entra in the more practical side of CSS. Nel nostro ultimo esempio stiamo per entrare nella parte più ricca (e forse la più difficile): CSS Layout. CSS Layout parla di come mostrare i box in un determinato ordine per dare una rappresentazione visuale completa alla tua pagina. Questa sarà l'ultima parte teorica che faremo sui CSS, poi sarai pronto per entrare nella parte avanzata.