Box Model

http://rovitex.fr/?vudymka=site-de-rencontre-femmes-ivoiriennes&926=02 Il box model è la formula su cui si basano le caselle di layout e comprende contenuto, spaziatura interna, bordo e margine. I CSS ci consentono di modificare questi valori per modificare la dimensione e la forma complessive della visualizzazione degli elementi.

I browser Web applicano utilmente gli stili CSS predefiniti ad alcuni elementi, il che significa che sono disposti in modo ragionevolmente leggibile: anche dove il CSS dell’autore non è stato applicato.

In Chrome, gli stili dell’utente predefinito per i paragrafi


hanno questo aspetto …
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

… e gli stili di elenco non ordinato


    • questo …

ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}

La proprietà display

In entrambi gli esempi precedenti, l’elemento display
la proprietà è impostata su block.
Gli elementi del blocco assumono tutto lo spazio disponibile in una dimensione. Tipicamente, questa è la dimensione orizzontale, perché il writing-mode è impostato su horizontal-tb(orizzontale; con una direzione del flusso dall’alto verso il basso). In alcuni casi e per alcune lingue (come il mongolo), vertical-lr è la proprietà di scrittura corretta.

Gli elementi inline (con il valore di visualizzazione inline) si comportano in modo diverso. Sono disposti in linea con il contesto, la modalità di scrittura e la direzione correnti. Sono larghi quanto il loro contenuto e sono posizionati adiacenti ovunque vi sia spazio per farlo. Gli elementi di blocco seguono la “direzione del flusso” e gli elementi in linea seguono la direzione di scrittura.

Pensando tipograficamente, si potrebbe dire che gli elementi blocco sono come i paragrafi e gli elementi in linea sono come le parole.

Gli elementi blocco (chiamati anche elementi block-level ) ti consentono di controllare le dimensioni orizzontali e verticali del box. Cioè, puoi applicare larghezza, altezza, margine e riempimento a un elemento di blocco. D’altra parte, gli elementi inline sono dimensionati intrinsecamente
(i valori width e height prescritti non hanno effetto) e sono consentiti solo i valori di margine e riempimento orizzontali. Gli elementi in linea sono progettati per adattarsi al flusso di posizionamento orizzontale tra gli altri elementi in linea.
Una proprietà di visualizzazione relativamente nuova,inline-block, è un ibrido di block e inline.

È possibile impostare le proprietà verticali su, inline-block,
sebbene ciò non sia sempre desiderabile, come dimostra l’illustrazione che segue.

Dei tipi di display di base, solo none rimane. Questo valore rimuove completamente l’elemento dal layout. Non ha presenza visiva e nessun impatto sulla disposizione degli elementi circostanti. È come se l’elemento stesso fosse stato rimosso dall’HTML. Di conseguenza, i browser non comunicano la presenza o il contenuto di display: none elementi per tecnologie assistive come il software di lettura dello schermo.

Contesti di Formattazione

Quando si applica display: flex o display: grid ad un
continua a comportarsi come un elemento block, usando display: block. Tuttavia, cambia il modo in cui si comportano i suoi elementi figlio. ad esempio, con display: flex (e nessun’altra proprietà relativa a Flexbox) applicata al genitore, i suoi figli si distribuiranno orizzontalmente. Oppure, per dirla in altro modo, la direzione del flusso passa da verticale a orizzontale.
I contesti di formattazione sono la base di molti dei layout documentati in questo progetto. Trasformano gli elementi in componenti di layout.

Contenuto del box

Il Web è un canale per informazioni principalmente testuali integrate da media come immagini e video, spesso indicati collettivamente come contenuto. I browser incorporano algoritmi di ritorno a capo e scorrimento per assicurarsi che il contenuto venga trasmesso all’utente nella sua interezza, indipendentemente dalle dimensioni e dalle dimensioni dello schermo e da impostazioni come il livello di zoom. Il Web è responsive in gran parte per impostazione predefinita. Senza intervento, è il contenuto di un elemento che ne determina le dimensioni e la forma.
Gli elementi inline dispongono il contenuto orizzontalmente e gli elementi block dispone il contenuto verticalmente.

Lasciata a se stessa, l’area di un box è determinata dall’area del contenuto che contiene. Poiché il contenuto web è dinamico (soggetto a modifiche), le rappresentazioni statiche dei layout web sono estremamente fuorvianti. Lavorare direttamente con CSS e la sua flessibilità sin dall’inizio, come facciamo qui, è altamente raccomandato.

Se si dimezza la larghezza di un elemento, dovrà essere alto il doppio per contenere la stessa quantità di contenuto.

la proprietà box-sizing

Per impostazione predefinita, le dimensioni di un box sono le dimensioni del contenuto della casella più i valori di riempimento e bordo ( implicitamente: box-sizing: content-box). Cioè, se imposti un elemento per essere 10rem di larghezza,
quindi aggiungi padding su entrambi i lati di 1rem dovrebbe essere 12rem di larghezza: 10rem più 1rem di paddind a destra e 1rem di padding a sinistra. Se si opta per box-sizing: border-box, l’area del contenuto è ridotta per accogliere il padding e la larghezza totale è uguale a quella prescritta, ossia width uguale a 10rem.

In generale, si ritiene preferibile utilizzare il modello border-box per tutti i box. Facilita il calcolo / anticipazione delle dimensioni del box.
Qualsiasi stile, come box-sizing: border-box sono applicabili a tutti gli elementi, vengono applicati al meglio utilizzando il selettore * (“universale” o “carattere jolly”). Come spiegato in dettaglio in Global and local styling, essere in grado di influenzare il layout di più elementi (in questo caso, tutti gli elementi) contemporaneamente è il modo in cui i CSS portano efficienza alla progettazione del layout.

* {
box-sizing: border-box;
}

Eccezioni

Ci sono eccezioni a border-box, come nel layout Center dove la misurazione del contenuto è fondamentale. La cascata CSS è progettata per accogliere le eccezioni alle regole generali.
* {
box-sizing: border-box;
}


center-l {
box-sizing: content-box;
}

Solo dove l’altezza o la larghezza di un box è vincolata e fa la differenza tra content-box e border-box. A titolo illustrativo, si consideri un elemento di blocco posizionato all’interno di un altro elemento di blocco.

Usando il modello content-box e padding di 1rem l’elemento figlio traboccherà di 2rem quando width: 100% è applicato.

Perche? Perchè width: 100% significa “rendere la larghezza di questo elemento uguale all’elemento genitore”. Dato che stiamo usando il modello content-box , il contenuto della larghezza è 100% quindi il riempimento viene aggiunto a questo valore.
Ma se usiamo width: auto (possiamo semplicemente rimuovere width: 100%, da auto che è il valore predefinito).

Implicitamente, height è impostato su auto il che significa che è derivato dal contenuto.
Quindi, box-sizing non ha effetto.

Conclusioni

Concludiamo dicendo che le dimensioni dei nostri elementi dovrebbero essere in gran parte derivate dal loro contenuto interno e contesto esterno. Quando proviamo a prescrivere le dimensioni, le cose tendono ad andare male. Tutto ciò che dovremmo fare come designer visivi è dare suggerimenti su come il layout dovrebbe prendere forma. Potremmo, ad esempio, applicare un’altezza minima (come nel layout Cover) o offrire una base flessibile (come nella barra laterale).

Il CSS è al centro della progettazione del layout algoritmico. Invece di dire ai browser cosa fare, permettiamo ai browser di fare i propri calcoli e trarre le proprie conclusioni, per adattarsi al meglio all’utente, al suo schermo e al dispositivo. Nessuno dovrebbe vedere contenuti oscurati in nessuna circostanza.

Poterbbe interessarti CSS Flow Layout