1. Selettore universale *

2. Selettore elemento h2

3. Selettore di classe .class

4.selettore id #id

1.Selettore intersezione e#id || e.class

2. Selettori dell'Unione e1,e2,e3

3. Selettore discendente e1 e2 e3

4. Selettore discendente e1>e2>e3

5. Selettore del fratello adiacente e1 e2

6. Selettore fratello universale e1~e2

Selettore di pseudo elementi

Selettore di pseudoclasse

1 [attr]

2 [attr="val"]

3 [attr^="val"]

4 [attr$="val"]

5 [attr*="val"]

6 [attr~="val"]

7 [attr|="val"]

nessuna ripetizione

ripeti-x

ripeti-y

spazio (regola la spaziatura dell'immagine)

rotondo (ridimensiona l'immagine)

(in alto, a sinistra, a destra, in basso, al centro) combinazione a coppie

(x% y%)

(x e)

scatola imbottita

scatola di confine

casella di contenuto

scatola imbottita

scatola di confine

casella di contenuto

automatico (formato originale)

x,y (larghezza, altezza)

x%,y% (percentuale dell'elemento principale)

copertura (adattata per coprire l'intero contenitore)

contenere (regolato per essere visualizzato completamente)

locale (scorre con il contenuto)

scroll (non scorre con il contenuto, ma scorre con la pagina)

fisso (dimensione fissa, non controllata)

larghezza del bordo

colore del bordo

stile del bordo

border-raius

border-image-source

porzione-immagine-bordo

larghezza dell'immagine del bordo

border-immagine-inizio

ripetizione dell'immagine del bordo

colore contorno, stile, larghezza

contorno-offset (l'offset esterno del contorno dal bordo)

auto

nascosto

scorrere

visibile (predefinito)

ereditare

1. Dopo che l'elemento è stato reso mobile, si staccherà dal flusso del documento e aumenterà il livello.

2. La posizione dell'elemento dopo che è flottato è influenzata dall'elemento flottato precedente. Se l'elemento precedente galleggia e la posizione dietro di esso è sufficiente, verrà visualizzato sulla stessa riga se la posizione dietro di esso è insufficiente, l'elemento verrà compresso nella riga successiva per la visualizzazione.

3. Dopo che l'elemento è stato flottato, se l'elemento precedente non è flottato, l'elemento corrente verrà flottato nella propria riga.

4. Se un elemento viene spostato alla riga successiva dopo essere stato mobile, la posizione dell'elemento corrente viene influenzata dall'elemento precedente con la stessa direzione mobile.

1. Il posizionamento mobile comporterà il collasso dell'altezza dell'elemento genitore

2. Gli elementi hanno "proprietà di avvolgimento" dopo essere stati flottati (simili ai blocchi in linea).

statico (impostazione predefinita, layout normale)

relativo (posizionamento relativo)

assoluto (posizionamento assoluto)

fisso (posizionamento fisso)

appiccicoso (posizionamento appiccicoso)

1. Più tardi viene posizionato l'elemento, più alto è il livello (z-index)

2. Dopo che l'elemento è stato posizionato, ha "proprietà di avvolgimento" (simili ai blocchi in linea).

Centratura orizzontale: elemento genitore allineamento testo: centro;

Centrato verticalmente: line-height: (altezza);

Centro orizzontalmente: margine: 0 automatico;

Centrare verticalmente:

Utilizzare l'implementazione float

Utilizzare il posizionamento per raggiungere

Disposizione a doppia ala volante

layout del Santo Graal

Asse principale: specifica l'ordine in cui sono disposti gli elementi elastici.

Asse verticale: determina la direzione in cui vengono aggiunti gli elementi nella seconda riga dopo che si è verificata un'interruzione di riga.

giustifica-contenuto (allineamento sull'asse principale)

Allineamento sull'asse verticale

flex-basis imposta la dimensione iniziale (non la larghezza) occupata dall'elemento flessibile sull'asse principale.

Se si impostano contemporaneamente base flessibile, larghezza e altezza, quest'ultima verrà automaticamente sovrascritta.

fr (es: 1fr 1fr 1fr; 100px 50% 1fr)

fr: il fr qui è proporzionale all'altezza del contenitore della griglia. (Se non è presente alcuna altezza, verrà calcolata in base all'altezza del contenuto.)

Avviso

Abilità