Qual è la differenza tra visibilità: nascosto e display: nessuno?

display:none significa che il tag in questione non verrà visualizzato affatto nella pagina (anche se è ancora ansible interagire con esso tramite dom). Non ci sarà spazio per questo tra gli altri tag.

visibility:hidden significa che a differenza della display:none , il tag non è visibile, ma lo spazio è assegnato per esso sulla pagina. Il tag è reso, non è visto sulla pagina.

Per esempio:

 test | Appropriate style in this tag | test 

Sostituendo [style-tag-value] con display:none risulta in:

 test | | test 

Sostituendo [style-tag-value] con visibility:hidden risultati visibility:hidden in:

 test |                       | test 

Non sono sinonimi.

display:none rimuove l’elemento dal normale stream della pagina, consentendo l’inserimento di altri elementi.

visibility:hidden lascia l’elemento nel normale stream della pagina in modo tale da occupare ancora spazio.

Immagina di essere in fila per un giro in un parco di divertimenti e qualcuno nella fila diventa così turbolento che la sicurezza li coglie dalla fila. Tutti in fila avanzeranno quindi di una posizione per riempire lo slot ora vuoto. Questo è come display:none .

Confrontalo con la situazione simile, ma che qualcuno di fronte a te indossa un mantello dell’invisibilità. Durante la visualizzazione della linea, sembrerà che ci sia uno spazio vuoto, ma le persone non possono riempire lo spazio vuoto perché qualcuno è ancora lì. Questa è come la visibility:hidden .

Una cosa che vale la pena aggiungere, anche se non è stato chiesto, è che esiste una terza opzione per rendere l’object completamente trasparente. Prendere in considerazione:

 1st unseen link.
 2nd unseen link.
 3rd unseen link. 

display:none rimuove l’elemento dal stream di layout.

visibility:hidden nasconde ma lascia lo spazio.

C’è una grande differenza quando si tratta di nodes figli. Ad esempio: se hai un div padre e un div figlio nidificato. Quindi se scrivi così:

In questo caso nessuno dei div sarà visibile. Ma se scrivi così:

Quindi il div figlio sarà visibile mentre il div padre non verrà mostrato.

Non sono sinonimi: display: none rimuove l’elemento dal stream della pagina e il resto della pagina scorre come se non fosse lì.

visibility: hidden nasconde l’elemento dalla vista ma non il stream della pagina, lasciando spazio per esso sulla pagina.

display: none rimuove completamente l’elemento dalla pagina e la pagina viene creata come se l’elemento non fosse affatto presente.

Visibility: hidden lascia lo spazio nel stream del documento anche se non puoi più vederlo.

Questo può o non può fare una grande differenza a seconda di quello che stai facendo.

Con visibility:hidden l’object occupa ancora altezza verticale nella pagina. Con display:none è completamente rimosso. Se hai del testo sotto un’immagine e display:none , quel testo si sposterà per riempire lo spazio in cui si trovava l’immagine. Se fai visibilità: nascosto il testo rimarrà nella stessa posizione.

display:none nasconde l’elemento e collassa lo spazio che stava occupando, mentre la visibility:hidden nasconderà l’elemento e preserverà lo spazio degli elementi. display: none inoltre effettua alcune delle proprietà disponibili da javascript nelle versioni precedenti di IE e Safari.

Se la proprietà visibilità è impostata su "hidden" , il browser occuperà ancora spazio sulla pagina per il contenuto, anche se è invisibile.
Ma quando impostiamo un object su "display:none" , il browser non alloca spazio sulla pagina per il suo contenuto.

Esempio:

 
 Content not display on screen and even space not taken. 
 
 Content not display on screen but it will take space on screen.  

Visualizza dettagli

Oltre a tutte le altre risposte, c’è una differenza importante per IE8: se si utilizza display:none e si tenta di ottenere la larghezza o l’altezza dell’elemento, IE8 restituisce 0 (mentre altri browser restituiscono le dimensioni effettive). IE8 restituisce la larghezza o l’altezza corrette solo per la visibility:hidden .

visibility:hidden manterrà l’elemento nella pagina e occuperà quello spazio ma non mostrerà all’utente.

display:none non sarà disponibile nella pagina e non occupa spazio.

visibility:hidden nasconde un elemento, ma occuperà lo stesso spazio di prima. L’elemento sarà nascosto, ma influenzerà ancora il layout.

display:none nasconde un elemento e non occupa spazio. L’elemento verrà nascosto e la pagina verrà visualizzata come se l’elemento non fosse presente:

visibility:hidden preservare lo spazio, mentre display:none non conserva lo spazio.

Un’altra differenza è la visibility:hidden funziona in browser veramente vecchi e display:none no:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

 display: none; 

Non sarà disponibile nella pagina e non occupa spazio.

 visibility: hidden; 

nasconde un elemento, ma occuperà lo stesso spazio di prima. L’elemento sarà nascosto, ma comunque influenzerà il layout.

visibility: hidden preservare lo spazio, mentre display: none non conserva lo spazio.

Visualizza Nessuno Esempio: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Esempio nascosto di visibilità: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

display:none; non visualizzerà l’elemento né assegnerà spazio per l’elemento sulla pagina, mentre visibility:hidden; non visualizzerà l’elemento sulla pagina ma assegnerà spazio sulla pagina. Possiamo accedere all’elemento in DOM in entrambi i casi. Per capirlo in un modo migliore, guarda il seguente codice: display: none vs visibility: hidden