Tutti gli elementi HTML all'interno del DOM possono essere considerate "scatole" (box), ovvero dei rettangoli, posizionate e visualizzate all'interno della pagine in base a determinate proprietà (posizionamento, floating, dimensioni, ecc.).
Il termine "box model" di CSS si riferisce alla generazione di un insieme di rettangoli da parte del browser per determinare il layout complessivo di un elemento. Possiamo immaginare questa struttura come una serie di scatole contenuta l'una nell'altra, come i pezzi di una matrioska.
L'ordine di contenimento, a partire dall'elemento più interno fino a quello più esterno (dalla scatola più piccola fino alla più grande nella metafora del box model) è il seguente:
- content: il contenuto vero e proprio (ad esempio il testo) dell'elemento;
- padding: la spaziatura tra i bordi e il contenuto;
- border: il bordo dell'elemento;
- margin: la spaziatura tra l'elemento e gli elementi circostanti.
Lo spazio totale occupato dall'elemento all'interno della pagina è determinato dalla somma di questi singoli valori.
L'altezza complessiva è calcolata come: margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom.
La larghezza complessiva è calcolata come: margin-left + border-left-with + padding-left + width + padding-right + border-right-width + margin-right.
Il box model di CSS3 è descritto nella relativa specifica disponibile sul sito del W3C all'indirizzo http://www.w3.org/TR/css3-box/
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Serializzare un enum come stringa con System.Text.Json
Compilare automaticamente applicazioni .NET 6 con le pipeline di Azure DevOps e GitHub Action
Completare le informazioni di log in Entity Framework Core
Creare automaticamente una pipeline YAML da una sua definizione in Azure DevOps
Welcome back to .NET
Utilizzare la visualizzazione flex per spostare una sidebar in base alle dimensioni dello schermo
Eseguire manualmente una GitHub Action
Eseguire chiamate hedging gRPC con ASP.NET Core 6
Forzare la lingua dell'interfaccia di Azure Active Directory B2C
Conversione di tipo in una pipeline di Azure DevOps
Eseguire task temporizzati tramite hosted service in ASP.NET Core
Integrare dive nelle pipeline di Azure DevOps e GitHub
I più letti di oggi
- Monitorare contemporaneamente i cambiamenti di più proprietà dello scope di AngularJS
- "welcome to the modern web development" con @dbochicchio e @kasuken, ora live per iniziare #PWAConfIT parleremo di #PWA e di come costruire applicazioni web moderne per tutto il pomeriggio. Seguiteci live su https://aspit.co/PWAConf-20 #aspilive
- Sfruttare le dipendenze con il model binding di ASP.NET Web Forms
- rilasciato #vs2017.5, con importanti aggiornamenti sulla velocità di caricamento dei progetti, supporto a C# 7.2 e nuove feature di Xamarin.disponibile inoltre anche #VS for #Mac, con sign integrato delle app iOS.altre informazioni su https://aspit.co/bkk
- Disabilitare un pulsante in Blazor durante il salvataggio