Utilizzo di CSS per posizionare elementi HTML

• Potrebbe 1, 2024

Le regole CSS ti danno la possibilità di posizionare gli elementi HTML esattamente dove li desideri. Puoi regolare il modo in cui rispondono agli altri elementi che li circondano o persino nasconderli completamente. Ecco una ripartizione delle proprietà del posizionamento CSS.

Display: questa proprietà definisce la modalità di visualizzazione di un elemento. Impostando display su "none" si nasconde completamente l'elemento, mentre altri valori possono cambiare il modo in cui un elemento reagisce ad altre proprietà ed elementi. Ad esempio, i div sono impostati per essere visualizzati come "blocco" per impostazione predefinita, il che significa che agisce come un oggetto rettangolare, ma è possibile utilizzare "display: inline" per forzare un div a comportarsi come un paragrafo. Oppure, puoi fare il contrario e usare "display: block" per forzare un paragrafo ad agire come un div.

Posizione: definisce come un elemento reagisce agli elementi circostanti. Gli elementi usano "position: static" per impostazione predefinita, il che significa che vengono visualizzati in ordine come appaiono nel codice HTML. "Posizione: relativa" significa che viene calcolata la posizione statica dell'elemento, quindi compensata da qualsiasi cosa tu indichi nelle proprietà "in alto" e "a sinistra". Gli altri elementi della pagina si comportano come se l'elemento relativo fosse ancora nella sua posizione statica. Gli elementi "Posizione: assoluta" ignorano la loro posizione statica, basando la loro posizione esclusivamente sui valori nelle proprietà superiore, sinistra, destra e inferiore. Inoltre, altri elementi ignoreranno quell'elemento (quindi se non stai attento puoi finire con alcune sovrapposizioni disordinate). "Posizione: fissa" è simile a "posizione: assoluta", tranne per il fatto che l'elemento manterrà il suo posto anche se il visitatore scorre la pagina.

Visibilità: decide se un elemento viene visualizzato sulla pagina o meno. La differenza tra "display: none" e "visible: hidden" è che nel primo caso, gli altri elementi della pagina si comportano come se l'oggetto invisibile non esistesse; nel secondo, altri elementi occuperanno un posto per l'elemento nascosto. Ovviamente, l'impostazione predefinita è "visibile".

Float: imposta se un elemento viene messo in cascata a sinistra o a destra di altri elementi (o non è affatto in cascata, che è l'impostazione predefinita). Questa proprietà è estremamente utile per posizionare correttamente gli elementi relativi. Devi impostare una larghezza per qualsiasi elemento mobile o non verrà visualizzato correttamente. Inoltre, se usi float per un elemento, probabilmente vorrai impostare anche la proprietà per tutti gli elementi circostanti.

Cancella: questa proprietà funziona insieme alla proprietà "float". Decide come l'elemento lascerà fluttuare gli altri elementi attorno ad esso - "clear: left" significa che nessun altro elemento può fluttuare alla sua sinistra; "clear: right" blocca il lato destro e "clear: both" significa che nessun elemento può fluttuare su entrambi i lati. L'impostazione predefinita è "clear: none" (nel senso che altri elementi possono fluttuare su entrambi i lati).

Istruzioni Video: LAYOUT CSS 3 - POSIZIONARE GLI ELEMENTI HTML NELLA PAGINA (Potrebbe 2024).