Il CSS Box Model spiegato con esempi

Se hai intenzione di creare un fantastico layout di pagina web, dovrai conoscere margini, bordi, padding e contenuto. Ogni elemento nel web design, che si tratti di un'immagine o di un testo, utilizza una casella con queste proprietà. Puoi facilmente creare layout complessi giocando con il modello di scatola. In questo articolo, analizzeremo il CSS Box Model e ti mostreremo come utilizzare queste proprietà con esempi pratici.

Che cos'è il modello di scatola CSS?

Il CSS box model è uno standard creato dal World Wide Web Consortium. Descrive tutti gli elementi in un documento HTML come caselle rettangolari con le proprie dimensioni. Queste caselle contengono un'area del contenuto e un margine circostante, un bordo e un'area di riempimento facoltativi. Quindi, esploriamo le parti di una scatola CSS.

Scopriamo i quattro livelli del modello box CSS.

Primo livello: contenuto

L'area del contenuto contiene il contenuto principale dell'elemento che potrebbe essere un'immagine, un testo o qualsiasi forma di contenuto multimediale. Puoi modificare le dimensioni degli elementi a livello di blocco usando

altezza e larghezza proprietà.

Secondo strato: imbottitura

Il riempimento è lo spazio tra la casella del contenuto e la sua casella di bordo. Sebbene si trovi intorno al tuo contenuto come uno spazio bianco, puoi utilizzare un colore di sfondo per visualizzare la differenza. Puoi candidarti imbottitura-top, padding-right, imbottitura-fondo, e imbottitura-sinistra proprietà per modificare lo spazio.

Terzo strato: bordo

Il bordo avvolge il contenuto e l'area di riempimento. Puoi ridimensionare e modellare il bordo usando larghezza del bordo, stile del bordo, e colore del bordo proprietà.

Quarto strato: Margine

L'ultimo strato del modello box è ampiamente utilizzato per generare spazio tra gli elementi. Il margine avvolge il contenuto, il riempimento e l'area del bordo. Puoi usare margine superiore,margine-destro, margine inferiore, e margine sinistro proprietà. Puoi anche dare alla proprietà margin un valore negativo o auto per ottenere alcune fantastiche tecniche di posizionamento.

Configurazione del progetto per il modello box CSS

Creiamo un mini progetto per dimostrare il modello di scatola di base con una casella di contenuto e proprietà di riempimento, bordo e margine. Puoi andare con testo, immagini o contenuti multimediali. Inizieremo assicurandoci che sia strutturato correttamente.

Struttura con HTML

Produzione:

Puoi utilizzare le funzionalità integrate del tuo browser, come il Strumenti per sviluppatori Chrome, per vedere cosa sta succedendo. Stiamo usando due immagini di Unsplash. Per semplicità, nasconderemo l'immagine dello smartphone utilizzando display: nessuno; finché non ne avremo bisogno in seguito.

Stile usando i CSS

/*************************
STILE DI BASE
*************************/
* {
margine: 0px;
imbottitura: 0px;
}
corpo {
display: flessibile;
direzione di flessione: riga;
} 
.Schermo {
display: nessuno !importante;
}

Ora diamo uno stile alla nostra casella di contenuto. Per prima cosa, imposteremo il altezza e larghezza dell'immagine. Inoltre, dare un colore di sfondo aiuta a una migliore visualizzazione. Facciamolo.

/*************************
CONTENUTO
*************************/
.contenuto-box {
display: flessibile;
direzione di flessione: riga;
giustifica-contenuto: centro;
allinea-elementi: centro;
/* Disegnare la casella del contenuto usando le proprietà di altezza e larghezza */
colore di sfondo: #fdf;
altezza: 20 em;
larghezza: 30 em;
}

Dai spazio al contenuto per respirare con l'imbottitura

Puoi impostare imbottitura-top, padding-right, imbottitura-fondo, e imbottitura-sinistra proprietà singolarmente o utilizzare la stenografia. Prova a usare la stenografia se possibile, poiché può farti risparmiare un po' di tempo. Vediamo come funziona l'imbottitura.

 /*************************
IMBOTTITURA
*************************/
/* Applicazione del riempimento */
imbottitura-top: 5em;
padding-right: 2em;
imbottitura-fondo: 8em;
imbottitura-sinistra: 2em;
/* Stenografia del riempimento */
/* in alto/a destra/in basso/a sinistra */
imbottitura: 5em 2em 8em 2em;
/* in alto/orizzontale/in basso */
imbottitura: 5em 2em 8em;

Produzione:

Disegna linee intorno al riempimento usando il bordo

Durante l'applicazione della proprietà border, assicurati di utilizzare il colore del bordo proprietà per conferire al bordo un colore distinto dallo sfondo. Puoi selezionare il stile del bordo individualmente o in una volta sola utilizzando la proprietà abbreviata. Lo stesso vale per larghezza del bordo proprietà.

Puoi anche impostare il raggio di confine per dare alla scatola angoli arrotondati con un raggio in px, rem, em, o percentuale.

 /*************************
FRONTIERA
*************************/
/* Applicazione delle proprietà del bordo */
/* Imposta il colore del bordo */
colore del bordo: rgb (148, 234, 255);
/* Seleziona lo stile del bordo */
stile border-top: solido;
stile bordo destro: tratteggiato;
stile bordo-fondo: scanalatura;
stile bordo sinistro: cresta;
/* stenografia in stile bordo */
/* in alto/a destra/in basso/a sinistra */
stile del bordo: cresta solida della scanalatura tratteggiata;
/* Imposta la larghezza del bordo */
larghezza bordo superiore: 4em;
larghezza bordo-destra: 2em;
larghezza bordo-basso: 2em;
bordo-sinistro-larghezza: 2em;
/* stenografia della larghezza del bordo*/
/* in alto/a destra/in basso/a sinistra */
larghezza del bordo: 4em 2em 2em 2em;
/* in alto/orizzontale/in basso */
larghezza del bordo: 4em 2em 2em;
/* abbreviazione della proprietà del bordo */
/* bordo: 4em rgb solido (148, 234, 255); */
/* Imposta il raggio del bordo */
raggio di confine: 5em;
raggio di confine: 20%;

Produzione:

Aggiungi spazio tra le caselle con margine

Puoi centrare una casella orizzontalmente usando margine: 0 auto, purché di larghezza definita.

 /*************************
MARGINE
*************************/
/* Applicazione delle proprietà dei margini */
margine superiore: 4em;
margine destro: 5em;
margine inferiore: 3em;
margine sinistro: 5em;
/* Stenografia del margine */
/* in alto/a destra/in basso/a sinistra */
margine: 4em 5em 3em 5em;
/* in alto/orizzontale/in basso */
margine: 4em 5em 3em;
/* Utilizzo del margine automatico */
margine: 3em automatico;

Produzione:

È possibile specificare la proprietà del margine utilizzando uno, due, tre o quattro valori. I valori possono essere una lunghezza, una percentuale o una parola chiave come auto. Capiamo come funziona:

• Quando specifichi un solo valore, significa che tutti e quattro i lati avranno lo stesso margine.
• Quando si specificano due valori, il primo valore significa margine superiore e margine inferiore mentre il secondo valore specifica margine-destro e margine sinistro.
• Quando si specificano tre valori, il primo e l'ultimo si applicano a margine superiore e margine inferiore rispettivamente. Il valore medio è per l'area orizzontale, cioè, margine-destro e margine sinistro.
• Quando si specificano tutti e quattro i valori, si applicano rispettivamente in alto, a destra, in basso e a sinistra (in senso orario).

Nota che puoi anche usare queste scorciatoie per il padding e le proprietà del bordo.

Guarda anche: Il cheat sheet delle proprietà essenziali di CSS3

Hai mai usato un margine negativo? Per visualizzarlo cancelliamo display: nessuno per visualizzare la nostra seconda immagine, quindi imposta un margine negativo.

/* .Schermo {
display: nessuno !importante;
} */
.contenuto-box {
display: flessibile;
direzione di flessione: riga;
allinea-elementi: centro;
colore di sfondo: #fdf;
altezza: 20 em;
larghezza: 30 em;
imbottitura: 5em 2em 8em;
stile del bordo: cresta solida della scanalatura tratteggiata;
larghezza del bordo: 4em 2em 2em;
raggio di confine: 20%;
/* Utilizzo del margine negativo */
margine: 3em -20em 3em 5em;
}

Produzione:

Il modello della scatola: creare un sito web perfetto per i pixel

Il modello box ti consente di definire lo spazio tra gli elementi, aggiungere bordi e creare facilmente un layout dall'aspetto complesso. Puoi iniziare subito a creare un fantastico sito web. Nel frattempo, puoi esplorare il bordo-scatola proprietà in dettaglio e giocare con il codice sopra.

Dovresti capire che ci sono altri metodi per disporre il contenuto nei CSS. Questi includono CSS Grid e CSS Flexbox. Una volta che ti senti a tuo agio con il modello a scatola, dovresti continuare a conoscere queste alternative.

Tutorial CSS Flexbox: le basi

Posiziona perfettamente i tuoi elementi HTML con l'aiuto di CSS Flexbox.

Leggi Avanti

Circa l'autore