Sommario
Il modello box in CSS descrive i box generati da elementi HTML. Il modello della casella contiene anche opzioni dettagliate per l'impostazione di margini, bordi, spaziatura interna e contenuto per ciascun elemento. L'immagine seguente mostra come è costruito il modello box.Il box model o "box model" è sicuramente la caratteristica più importante del linguaggio dei fogli di stile CSS, poiché condiziona il design di tutte le pagine web. Il box model è il comportamento dei CSS che fa sì che tutti gli elementi nelle pagine siano rappresentati da riquadri rettangolari.
Le caselle di una pagina vengono create automaticamente. Ogni volta che viene inserito un tag HTML, viene creata una nuova casella rettangolare che racchiude il contenuto di quell'elemento. L'immagine seguente mostra le tre caselle rettangolari che creano i tre tag HTML inclusi nella pagina.
Ci sono due tipi di scatole: blocca e in linea. Gli elementi di blocco interrompono il flusso del layout. Cioè, appaiono da soli, inserendo "interruzioni di riga". Gli elementi in linea seguono il flusso e sono contenuti all'interno di elementi di blocco.
Ad esempio, un paragrafo sarebbe un elemento di blocco (non possiamo avere un paragrafo accanto all'altro, ma due paragrafi in una riga appariranno uno sotto l'altro. D'altra parte, un collegamento è un elemento in linea, poiché non "taglia" il testo in cui si trova.
Le parti che compongono ciascuna scatola e il loro ordine di visualizzazione dal punto di vista dell'utente sono le seguenti:
Contenuto (contenuto): è il contenuto HTML dell'elemento (le parole in un paragrafo, un'immagine, il testo in un elenco di elementi, ecc.)
Imbottitura: Spazio libero opzionale tra contenuto e bordo.
Frontiera: linea che racchiude completamente il contenuto e la sua imbottitura.
Immagine di sfondo: Immagine visualizzata dietro il contenuto e lo spazio di riempimento.
Colore di sfondo: colore visualizzato dietro il contenuto e lo spazio di riempimento.
Margine (margine): separazione facoltativa tra la scatola e le altre scatole adiacenti.
Il padding e il margine sono trasparenti, quindi lo spazio occupato dal padding mostra il colore o l'immagine di sfondo (se definito) e lo spazio occupato dal margine mostra il colore di sfondo o l'immagine del tuo elemento genitore (se definito). Se nessun elemento padre ha un colore di sfondo o un'immagine definita, viene visualizzato il colore o l'immagine di sfondo della pagina (se definito).
Se una casella definisce sia un colore che un'immagine di sfondo, l'immagine ha la priorità più alta ed è quella visualizzata. Tuttavia, se l'immagine di sfondo non copre completamente la casella dell'elemento o se l'immagine presenta aree trasparenti, viene visualizzato anche il colore di sfondo. Combinando immagini trasparenti e colori di sfondo, si possono ottenere effetti grafici molto interessanti.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
