CSS Visibilità (Visibilità)

L'attributo Visibility specifica se un elemento è visibile o nascosto.

Specificare la visibilità dell'elemento

Puoi utilizzare l'attributo visibility per specificare se un elemento è visibile. Questo attributo può accettare uno dei seguenti valori elencati nella tabella sottostante:

visibility: collapse; tuttavia, le regole di stile rimuoveranno gli elementi interni della tabella, ma non influenzeranno in alcun modo la disposizione della tabella. Lo spazio occupato dagli elementi tabella di solito sarà riempito dal successivo同级.

CSS Visibility vs Display

CSS display e l'attributo visibility sembrano la stessa cosa, ma in realtà sono completamente diversi e spesso creano confusione per i nuovi sviluppatori web.

• visibility: hidden; nasconde l'elemento, ma occupa ancora lo spazio nella disposizione. Se la visibilità dei figli della casella nascosta è impostata su "visibile", saranno visibili.

• display: none; chiude la visualizzazione e rimuove completamente l'elemento dal documento. Anche se il suo HTML è ancora nel codice sorgente, non occupa alcun spazio. Anche se tutti gli attributi di visualizzazione dei figli sono impostati su none, chiuderà la visualizzazione.

Uso dell'attributo Visibility

visibility:　visible
/*　l'elemento è visibile, valore predefinito　*/
visibility:　hidden
/*　l'elemento non è visibile, ma mantiene lo spazio corrispondente.　*/
visibility:　collapse
/*　solo per l'oggetto　table　ha effetto, può rimuovere righe o colonne senza influenzare la disposizione della tabella. Se questo valore viene utilizzato su oggetti diversi da　table　si comporta come　hidden　.　*/
visibility: inherit
/* Eredita il valore di visibility dell'elemento superiore. */

Uso della proprietà Display

Ci sono molti valori disponibili per la proprietà Display, ma qui ci concentriamo solo su alcuni di essi: block, none e inline

display: none
/* L'elemento è invisibile e non viene riservato uno spazio corrispondente */
display: block
/* Si comporta come un elemento di livello verticale (normalmente occupa una riga intera) */
display: inline
/* Si comporta come un elemento di livello orizzontale (normalmente non occupa una riga intera) */

Da ciò emerge che, sebbene le proprietà Visibility e Display possano entrambe nascondere un elemento, la differenza tra loro sta nel fatto che visibility: hidden nasconde un elemento mantenendo allo stesso tempo lo spazio necessario per quell'elemento nella pagina, mentre display: none si comporta come se l'elemento fosse stato rimosso dalla pagina, rendendo invisibile l'esistenza dell'elemento.
Inoltre, la differenza tra display: block e display: inline sta nel fatto che gli elementi block occupano una riga intera nella pagina, mentre gli elementi inline non lo fanno. Alcuni oggetti sono predefiniti come elementi block, mentre altri come elementi inline. E' importante prestare attenzione a evitare la duplicazione di definizioni di proprietà identiche durante l'uso.

Quando usare le proprietà Visibility o Display