TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Tutorial CSS Box Model

44

CSS è uno strumento eccellente per il web design front-end. La popolarità non è solo con la facilità d’uso, ma anche con funzionalità robuste. I CSS influenzano ogni singolo elemento di una pagina web. Pertanto, ogni web designer che è uno sviluppatore di base per semplici designer di layout dovrebbe conoscere le basi dei CSS. Il box model in CSS è la base per definire layout e posizionamento degli elementi su una pagina. In questo articolo esploreremo in dettaglio le basi del modello box CSS. Inoltre, tratteremo anche come analizzare il box model di un elemento in un browser.



Che cos’è il modello di scatola CSS?

Quando si utilizza CSS, ogni elemento HTML su una pagina Web è considerato come una casella rettangolare. Quindi il concetto è indicato come modello di scatola. Questo aiuta a definire facilmente il layout di una pagina web e posizionare gli elementi per allinearli secondo necessità. Nel modello box il contenuto di un elemento HTML è posizionato al centro e seguito da padding, bordo e margine come mostrato di seguito:

Tutorial CSS Box Model

Elemento modello scatola CSS

  • Margine: questa è l’area intorno al confine ed è sempre trasparente. Lo scopo del margine è fornire lo spazio necessario tra gli elementi e dai bordi del browser.
  • Bordo: questa è una linea visibile attorno al contenuto e all’area di riempimento. Generalmente viene utilizzato per fornire un contorno a un elemento e può avere qualsiasi colore e larghezza.
  • Padding: lo spazio tra il contenuto effettivo e il bordo viene definito padding. Quando il contenuto ha linee di confine visibili, è opportuno avere un po’ di riempimento. Ciò contribuirà a creare spazio tra il contenuto e il bordo.
  • Contenuto: contenuto effettivo come testo e immagine tra tag HTML.

Correlati: tutorial sulle unità CSS per principianti.

Esempio di elemento modello scatola

Facciamo un semplice esempio di creazione di un paragrafo all’interno dei tag div per spiegare il concetto di box model. Il CSS dovrebbe apparire come di seguito:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; } </style>

Si noti che il codice CSS per margin e padding contiene le dimensioni rispettivamente per superiore, sinistro, inferiore e destro.

E l’HTML per inserire il contenuto con il css sopra è:

<div class="box-model"> <p>This is a test content to explain how CSS box model will look like. This is a paragraph with different padding, different margin and border of 10px.</p> </div>

L’output del codice sopra apparirà come di seguito sul browser. Come accennato, il margine non può essere visto in quanto è trasparente.

Tutorial CSS Box Model

Visualizzazione del modello box CSS di un elemento nel browser IE 11

Come controllare il modello di casella CSS su un browser?

È una buona idea vedere la teoria in modo pratico. Puoi vedere il modello di casella CSS di un elemento direttamente dal tuo browser web. Qui mostriamo lo screenshot con il browser Google Chrome. Il metodo rimane lo stesso per tutti gli altri browser come Firefox, Edge e Safari.

  • Apri qualsiasi pagina web e fai clic con il pulsante destro del mouse sull’elemento che desideri esplorare.
  • Puoi fare clic con il pulsante destro del mouse su qualsiasi testo, immagine, video o spazio vuoto.
  • Scegli l’opzione "Ispeziona elemento" per aprire la console per sviluppatori.
  • Ha un riquadro sinistro per visualizzare HTML e un riquadro destro per visualizzare CSS.
  • Puoi vedere il modello di casella CSS dell’elemento scelto nella scheda "Layout" del riquadro di destra.
  • Facendo riferimento al codice di esempio sopra, tutti i bordi, i margini e i padding corrisponderanno alle dimensioni esatte definite nel CSS.

Nota, puoi visualizzare il markup HTML di un elemento nel browser Google Chrome nella scheda "Elementi". Il modello CSS e box corrispondente può essere visto nella scheda "Stili" come mostrato nell’immagine qui sotto.

Tutorial CSS Box Model

Visualizzazione del modello box CSS di un elemento nel browser Chrome

Calcolo della larghezza e dell’altezza di un elemento nel modello box CSS

Ora che hai compreso il concetto di modello box CSS. Ogni volta che si definiscono l’altezza e la larghezza di un elemento, la larghezza totale e l’altezza totale di quell’elemento dovrebbero includere margine, padding e larghezza del bordo. Aggiungiamo altezza e larghezza all’esempio di codice CSS precedente:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; width: 300px; height: 200px; } </style>

Articoli Correlati:


Ora qualsiasi elemento che chiama lo stile della classe CSS "box-model" dovrebbe essere posizionato con la seguente larghezza totale e altezza totale.

  • Altezza totale = Altezza + Margine superiore + Margine inferiore + Imbottitura superiore + Imbottitura inferiore + Larghezza bordo = 200 + 30 + 5 + 10 + 10 + 10 = 265 px.
  • Larghezza totale = Larghezza + Margine sinistro + Margine destro + Imbottitura sinistra + Imbottitura destra + Larghezza bordo = 300 + 15 + 5 + 0 + 5 + 10 = 335 px.

Il layout di pagina completo sarà progettato considerando la larghezza totale e le dimensioni dell’altezza totale di ciascun elemento.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More