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. È possibile modificare le dimensioni degli elementi a livello di blocco utilizzando le proprietà di altezza e larghezza .
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. È possibile applicare le proprietà padding-top , padding-right , padding-bottom e padding-left per modificare lo spazio.
Terzo strato: bordo
Il bordo avvolge il contenuto e l'area di riempimento. Puoi ridimensionare e modellare il bordo utilizzando le proprietà border-width , border-style e border-color .
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 utilizzare le proprietà margin-top, margin-right , margin-bottom e margin-left . 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
Modello scatola CSS
Produzione:
Puoi utilizzare le funzioni integrate del tuo browser, come gli Strumenti per sviluppatori di 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
/************************* BASIC STYLING *************************/ * { margin: 0px; padding: 0px; } body { display: flex; flex-direction: row; } .display { display: none !important; }
Ora diamo uno stile alla nostra casella di contenuto. Per prima cosa, imposteremo l' altezza e la larghezza dell'immagine. Inoltre, dare un colore di sfondo aiuta a una migliore visualizzazione. Facciamolo.
/************************* CONTENT BOX *************************/ .content-box { display: flex; flex-direction: row; justify-content: center; align-items: center; /* Styling the content box using height and width properties */ background-color: #fdf; height: 20em; width: 30em; }
Dai spazio al contenuto per respirare con l'imbottitura
Puoi impostare le proprietà padding-top , padding-right , padding-bottom e padding-left individualmente o utilizzare la stenografia. Prova a usare la stenografia se possibile, poiché può farti risparmiare un po' di tempo. Vediamo come funziona l'imbottitura.
/************************* PADDING *************************/ /* Applying padding */ padding-top: 5em; padding-right: 2em; padding-bottom: 8em; padding-left: 2em; /* Padding shorthand */ /* top/right/bottom/left */ padding: 5em 2em 8em 2em; /* top/horizontal/bottom */ padding: 5em 2em 8em;
Produzione:
Disegna linee attorno al riempimento usando il bordo
Durante l'applicazione della proprietà border, assicurati di utilizzare la proprietà border-color per conferire al bordo un colore distinto dallo sfondo. È possibile selezionare lo stile del bordo singolarmente o in una volta sola utilizzando la proprietà abbreviata. Lo stesso vale per la proprietà di larghezza del bordo .
Puoi anche impostare il raggio del bordo per dare alla casella angoli arrotondati con un raggio in px , rem , em o percentuale.
/************************* BORDER *************************/ /* Applying border properties */ /* Set the border color */ border-color: rgb(148, 234, 255); /* Select border style */ border-top-style: solid; border-right-style: dashed; border-bottom-style: groove; border-left-style: ridge; /* border-style shorthand */ /* top/right/bottom/left */ border-style: solid dashed groove ridge; /* Set border width */ border-top-width: 4em; border-right-width: 2em; border-bottom-width: 2em; border-left-width: 2em; /* border-width shorthand*/ /* top/right/bottom/left */ border-width: 4em 2em 2em 2em; /* top/horizontal/bottom */ border-width: 4em 2em 2em; /* border property shorthand */ /* border: 4em solid rgb(148, 234, 255); */ /* Set border-radius */ border-radius: 5em; border-radius: 20%;
Produzione:
Aggiungi spazio tra le caselle con margine
Puoi centrare una casella orizzontalmente usando margin: 0 auto , a condizione che abbia una larghezza definita.
/************************* MARGIN *************************/ /* Applying margin properties */ margin-top: 4em; margin-right: 5em; margin-bottom: 3em; margin-left: 5em; /* Margin shorthand */ /* top/right/bottom/left */ margin: 4em 5em 3em 5em; /* top/horizontal/bottom */ margin: 4em 5em 3em; /* Using auto margin */ margin: 3em auto;
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 specifichi due valori, il primo valore indica margin-top e margin-bottom mentre il secondo valore specifica margin-right e margin-left .
- Quando si specificano tre valori, il primo e l'ultimo si applicano rispettivamente a margin-top e margin-bottom . Il valore centrale è per l'area orizzontale, cioè margin-right e margin-left .
- 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.
Vedi anche: Il cheat sheet delle proprietà essenziali di CSS3
Hai mai usato un margine negativo? Per visualizzarlo cancelliamo display: none per visualizzare la nostra seconda immagine, quindi impostiamo un margine negativo.
/* .display { display: none !important; } */ .content-box { display: flex; flex-direction: row; align-items: center; background-color: #fdf; height: 20em; width: 30em; padding: 5em 2em 8em; border-style: solid dashed groove ridge; border-width: 4em 2em 2em; border-radius: 20%; /* Using negative margin */ margin: 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 in dettaglio la proprietà border-box 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.