Annidamento CSS CSS Nesting
L'annidamento CSS è una sintassi integrata per scrivere una regola di stile dentro un'altra. Il browser segue comunque le regole CSS per la lettura dei selettori e della loro specificità.
↗Layout e CSS
Scopri come il contenuto ottiene la sua dimensione, posizione, spaziatura, livelli e forma su ogni schermo.
01 / Atlas
Tutti i termini di Layout e CSS
Apri un termine per un significato semplice, un esempio, quando usarlo, quanto è ufficiale e il suo nome codice.
-
01 · Più dettagli -
02 · Più dettagli Blocco contenente Containing Block
Un blocco contenitore è il rettangolo che un elemento utilizza per calcolare la sua posizione e la dimensione percentuale.
↗ -
03 · Nucleo Breakpoint & Media Query Breakpoint & Media Query
Un breakpoint è dove un layout deve cambiare. Una media query applica il CSS quando il viewport o il dispositivo rispetta una certa condizione.
↗ -
04 · Nucleo Cascata CSS CSS Cascade
La cascata CSS è l'insieme di regole che un browser utilizza quando diversi stili mirano alla stessa cosa. Controlla da dove proviene ogni regola, la sua importanza, il contesto, il livello, il peso del selettore, l'ambito e l'ordine.
↗ -
05 · Nucleo clamp() clamp()
`clamp()` sceglie un valore CSS preferito ma lo mantiene tra un minimo e un massimo.
↗ -
06 · Nucleo Colonna centrata Centered Column
Una colonna centrata ha una larghezza massima leggibile e uno spazio uguale su entrambi i lati.
↗ -
07 · Più dettagli comportamento di overscroll overscroll-behavior
`overscroll-behavior` controlla cosa succede quando un'area di scorrimento raggiunge il suo bordo. Può impedire che lo scorrimento continui in un'area genitore e può cambiare l'effetto del bordo.
↗ -
08 · Più dettagli contenuto-massimo max-content
`max-content` è la dimensione che il contenuto vorrebbe avere se non si interrompesse ai punti di interruzione normali.
↗ -
09 · Più dettagli Contesto di formattazione del blocco Block Formatting Context
Un contesto di formattazione a blocchi, o BFC, è un'area separata per il layout dei blocchi. Mantiene i float al suo interno e impedisce ad alcuni margini e float di influenzare il contenuto esterno.
↗ -
10 · Più dettagli Contesto di impilamento Stacking Context
Un contesto di impilamento è un gruppo locale di livelli CSS. Gli elementi all'interno del gruppo sono ordinati prima, poi l'intero gruppo viene posizionato tra gli altri gruppi.
↗ -
11 · Più dettagli Contesto di stacking e Z-index — Pacchetto di apprendimento Stacking Context & Z-index — Learning Bundle
Questo pacchetto di apprendimento collega due concetti CSS. Un contesto di impilamento mantiene separato il suo ordine di pittura. Lo z-index ordina le caselle che possono partecipare all'interno di quel contesto. Il pacchetto non è un termine standard unico del CSS.
↗ -
12 · Nucleo CSS Grid CSS Grid
CSS Grid è un sistema di layout per righe e colonne insieme. Può impostare aree fisse o modificarle quando lo spazio cambia.
↗ -
13 · Più dettagli dimensionamento intrinseco Intrinsic Sizing
Il dimensionamento intrinseco permette al contenuto di un elemento di contribuire a determinare la sua dimensione invece di usare solo una dimensione fissa esterna.
↗ -
14 · Nucleo Ereditarietà CSS CSS Inheritance
L'ereditarietà CSS permette ad alcune proprietà di copiare un valore da un elemento genitore. Questo accade quando il figlio non ha un valore proprio.
↗ -
15 · Nucleo Flexbox Flexbox
Flexbox è un sistema di layout CSS per una direzione alla volta. Allinea e distribuisce gli elementi lungo una riga o una colonna.
↗ -
16 · Più dettagli Griglia Bento Bento Grid
Una griglia bento impacchetta riquadri di dimensioni diverse in un solo layout. Le campate più grandi mostrano quali contenuti contano di più.
↗ -
17 · Nucleo Griglia di schede Card Grid
Una griglia di schede ripete schede che possono essere confrontate. Il numero di colonne cambia in base allo spazio disponibile.
↗ -
18 · Nucleo indice-z z-index
L'indice-z è una proprietà CSS che imposta il livello front-to-back di una casella posizionata. In alcuni casi, crea anche un nuovo contesto di sovrapposizione locale.
↗ -
19 · Più dettagli Layout a muratura Masonry Layout
Un layout a masonry raggruppa elementi di altezze diverse in colonne. Gli elementi riempiono gli spazi vuoti verticali senza dividere le righe.
↗ -
20 · Nucleo Layout a pagina singola Single-Page Layout
Un Layout a Pagina Singola mette una storia o un'attività principale in un'unica lunga pagina.
↗ -
21 · Più dettagli Layout della documentazione Documentation Layout
Un Documentation Layout unisce navigazione, articolo, esempi, indice e link successivi in un'unica vista di lettura.
↗ -
22 · Più dettagli Livelli a cascata Cascade Layers
I livelli a cascata sono gruppi nominati che stabiliscono l'ordine delle regole CSS. Il browser verifica questo ordine prima di confrontare la specificità dei selettori.
↗ -
23 · Nucleo Margine Margin
Il margine è lo spazio al di fuori del bordo di un elemento. Mantiene quell'elemento lontano dagli altri elementi vicini nel layout.
↗ -
24 · Più dettagli min-contenuto min-content
`min-content` è la dimensione più piccola che il contenuto può usare dopo essersi interrotto in ogni punto di interruzione consentito.
↗ -
25 · Nucleo minmax() minmax()
`minmax()` è una funzione di CSS Grid che conferisce a una riga o colonna sia una dimensione minima sia una dimensione massima.
↗ -
26 · Nucleo Modello a scatola Box Model
Il modello a scatola CSS spiega la dimensione di un elemento. Ogni scatola ha contenuto, padding, bordo e margine.
↗ -
27 · Nucleo object-fit object-fit
`object-fit` controlla come un'immagine, un video o un elemento simile si adatta all'interno della sua casella.
↗ -
28 · Nucleo Opacità Opacity
L'opacità indica quanto un elemento e i suoi figli sembrano solidi. Può variare da trasparente a solido.
↗ -
29 · Nucleo Overflow Overflow
L'overflow è ciò che succede quando il contenuto è più grande della sua casella. Il CSS può mostrarlo, ritagliarlo o permettere alle persone di scorrerlo.
↗ -
30 · Più dettagli Posizionamento Anchor CSS CSS Anchor Positioning
Il Posizionamento Anchor CSS posiziona una scatola rispetto a un altro elemento di ancoraggio nominato.
↗ -
31 · Nucleo Posizionamento CSS CSS Positioning
Il posizionamento CSS indica contro cosa un elemento viene posizionato. Può utilizzare il flusso normale, se stesso, un antenato o il viewport come riferimento.
↗ -
32 · Più dettagli Posizione appiccicosa e fissata — Pacchetto di apprendimento Sticky & Fixed Position — Learning Bundle
Questo pacchetto di apprendimento confronta due valori di posizione CSS. sticky rimane nel flusso normale finché non raggiunge un punto stabilito nel suo contenitore di scorrimento. fixed è posizionato rispetto a un blocco contenitore con posizione fissa. Il pacchetto non rappresenta un singolo termine CSS.
↗ -
33 · Nucleo Posizione corretta Fixed Position
Il posizionamento fisso CSS colloca una scatola rispetto a un contenitore fisso, di solito la finestra del browser. La scatola normalmente rimane in posizione mentre il documento scorre.
↗ -
34 · Nucleo Posizione sticky Sticky Position
Il posizionamento sticky in CSS inizia come un normale posizionamento relativo. Quando la pagina scorre, la casella può rimanere a un bordo impostato, ma solo all'interno del suo blocco contenitore.
↗ -
35 · Nucleo Proprietà Logiche CSS CSS Logical Properties
Le proprietà logiche CSS descrivono i lati secondo il flusso di scrittura, come blocco e inline. Sostituiscono direzioni fisse come alto, destra, basso e sinistra. Questo aiuta i layout a seguire la direzione di scrittura della lingua.
↗ -
36 · Più dettagli Proprietà personalizzata CSS CSS Custom Property
Una CSS custom property è un valore CSS riutilizzabile, spesso chiamato variabile CSS. Segue la cascata e può cambiare in base allo scope o al tema.
↗ -
37 · Nucleo Pseudo-classe Pseudo-class
Una pseudo-classe fa parte di un selettore CSS. Trova un elemento attraverso una condizione, come stato, luogo, lingua o azione dell'utente.
↗ -
38 · Nucleo Pseudo-elemento Pseudo-element
Un pseudo-elemento permette al CSS di stilizzare una parte o una casella senza un elemento normale nel HTML sorgente. Esempi includono la prima lettera e la decorazione generata.
↗ -
39 · Più dettagli Query del contenitore Container Query
Una container query permette al CSS di adattare un componente al suo contenitore. Controlla la dimensione o lo stile di quel contenitore, non solo la finestra.
↗ -
40 · Nucleo Rapporto d'aspetto Aspect Ratio
Il rapporto d'aspetto indica quanto è largo un elemento rispetto a quanto è alto.
↗ -
41 · Nucleo Riempimento Padding
Il padding è lo spazio all'interno del bordo di un elemento, tra il suo contenuto e il suo bordo.
↗ -
42 · Più dettagli Scroll Snap Scroll Snap
CSS Scroll Snap permette a un'area di scorrimento di fermarsi in punti di allineamento scelti dopo che le persone scorrono.
↗ -
43 · Nucleo Selettore CSS CSS Selector
Un selettore CSS è un modello che trova elementi su una pagina in modo che possano essere applicati loro degli stili.
↗ -
44 · Più dettagli Sfocatura dello sfondo Backdrop Blur
La sfocatura dello sfondo ammorbidisce ciò che si trova dietro una superficie trasparente. Non sfoca il contenuto della superficie stessa.
↗ -
45 · Nucleo Shell dell'app App Shell
Un shell di app è il piccolo telaio che rimane mentre il contenuto della pagina cambia. Solitamente contiene navigazione, identità e stato.
↗ -
46 · Nucleo Spaziatura Spacing
Lo spazio è uno spazio vuoto messo apposta. Raggruppa elementi correlati, separa idee e dà ritmo alla pagina.
↗ -
47 · Nucleo Spazio Gap
Lo spazio è lo spazio che un contenitore mette tra i suoi figli Flexbox o Grid. La stessa regola si applica a ogni coppia.
↗ -
48 · Nucleo Specificità CSS CSS Specificity
La specificità CSS è il peso di un selettore. Quando altre regole di cascade sono in parità, il browser usa questo peso per scegliere quale stile prevale.
↗ -
49 · Più dettagli Subgrid Subgrid
Una subgrid è una griglia all'interno di un'altra griglia che condivide le dimensioni delle righe o delle colonne del genitore. Può condividere una direzione o entrambe.
↗ -
50 · Nucleo Troncamento del testo Text Truncation
Il troncamento del testo taglia il testo per risparmiare spazio. Un'ellissi mostra che una o più righe mancano.
↗ -
51 · Nucleo Unità di viewport Viewport Units
Le unità di viewport sono lunghezze CSS basate sull'area visibile del browser. Le versioni piccola, grande e dinamica gestiscono le barre del browser che appaiono o scompaiono.
↗