Cosa sono i Box CSS e come interagire con essi! 2019

Benvenuto in questo nuovo articolo in cui scopriremo cosa sono i Box CSS e come interagire con essi.

Iniziamo con il dire che il CSS tratta ogni elemento HTML come se fosse contenuto in un box, i quali possono essere “alterati” mediante alcune proprietà specifiche, ad esempio controllare le dimensioni dei box, creare bordi bordi attorno ad essi o mostrari e nasconderli a nostro piacimento.

Di default le dimensioni del box sono sufficienti per mostrare il proprio contenuto, per poter definire le dimensioni esistono due proprietà height e width, le quali regolano le dimensioni tramite percentuale, pixel o Em.

In aggiunta è possibile limitare la larghezza tramite min-width e max-width e l’altezza tramite min-height e max-height.

La proprietà overflow indica al browser cosa fare se il contenuto di un box non rientra nello spazio disponibile e può assumere i seguenti valori.

Hidden, il quale nasconde semplicemente il contenuto in eccedenza, scroll che aggiunge una scrollbar nel box e visible che permette di vedere il contenuro in eccesso al difuori del box.

Ogni box ha tre proprietà fondamentali che permettono di controllarne l’aspetto, border, per gestire il bordo, margin, ovvero la parte all’esterno del bordo e il padding, la parte tra il contenuto e il bordo.

Altra proprietà importante è la possibilità di poter gestire il tipo di visualizzazione tramite la proprietà display, infatti con il valore inline si fa in modo che l’elemento si comporti come un elemento in linea, con block si comporta come un elemento di blocco, inline-block è la fusione tra i due, infine none “rimuove” l’elemento dalla pagina.

Invece con la proprietà visibility tramite i valori hidden e visible nascondono o meno l’elemento.

Infine mediante la proprietà box-shadow possiamo aggiungere un’ombra attorno o all’interno del box sulla falsariga della proprietà text-shadow.

Bene, questo era il tutto, spero di averti aiutato nell’ampliare le tue conoscenze nell’ambito informatico, in particolare su cosa sono i BOX CSS e come interagire con essi.