::Il-mio.sito-web-dedicato-al.coding
Pillole di HTML-CSS
Proprietà position
Piccola nota introduttiva
Gli elementi contenuti all'intero di una pagina HTML, contrassegnati da specifici tag, vengono posizionati, seguedo il normale flusso. Per normale flusso si intende il valore di default di quella proprietà che colloca gli elementi in una determinata posizione, gli uni rispetto agli altri, all'interno della pagina.
Esistono elementi HTML che vengono dislocati verticalmente:
ed elementi che vengono dislocati orizzontalmente
Ovviamente le proprietà degli elementi che determina di default la posizione degli uni rispetto agli altri , sia che essi vengano collocati verticalmente oppure orizzontalmente in base al proprio normale flusso, può essere cambiata in modo tale, ad esempio, che elementi che vengono disposti di defautl verticalmente possano essere dislocati orizzontalmente e viceversa.
Una delle proprietà che permette di modificare il flusso degli elementi è: dispaly. essa può assumere i segunti valori:
-
inline
Visualizza un elemento come elemento inline. Le proprietà di altezza e larghezza non avranno alcun effetto. Questa è l'impostazione predefinita.
-
block
Visualizza un elemento come un blocco. Inizia su una nuova riga e occupa l'intera larghezza.
-
contents
Questo valore speciale fa sì che l'elemento stesso non venga visualizzato, ma i suoi figli vengono trattati come se fossero diretti figli del suo elemento padre.
-
flex
Visualizza un elemento come contenitore flessibile a livello di blocco.
-
grid
-
inline-block
-
inline-flex
-
width
-
inline-grid
-
inline-table
-
list-item
-
run-in
-
table
-
table-caption
-
table-column-group
-
table-header-group
-
table-footer-group
-
table-row-group
-
table-cell
-
table-column
-
table-row
-
none
-
initial
-
inherit
Nell'esempio sotto son rappresentati due elementi <div> con la proprietà display settata su block (valore di default):