css - title tag a




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

La visibility:hidden regole CSS visibility:hidden e display:none entrambe risultano nell'elemento non visibile. Sono questi sinonimi?


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

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

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

<div id="parent" style="visibility:hidden;">
     <div id="child" style="visibility:visible;"></div>
</div>

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


Con visibility:hidden l'oggetto 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.


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 .


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

Esempio:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Visualizza dettagli


Una cosa che vale la pena aggiungere, anche se non è stato chiesto, è che esiste una terza opzione per rendere l'oggetto completamente trasparente. Tenere conto:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

In questo caso ottieni:

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

La differenza tra 1 e 2 è già stata evidenziata (ovvero 2 occupa ancora spazio). Tuttavia, c'è una differenza tra 2 e 3: nel caso 3, il mouse passerà alla mano quando si passa sopra il collegamento, e l'utente può ancora fare clic sul collegamento, e gli eventi Javascript continueranno a essere attivati ​​sul collegamento. Questo di solito non è il comportamento che desideri. Il comportamento durante la selezione del testo può variare anche tra i browser.


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 flusso del documento anche se non puoi più vederlo.

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


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.


display:none rimuove l'elemento dal flusso di layout.

visibility:hidden nasconde ma lascia lo spazio.


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:


Non sono sinonimi.

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

visibility:hidden lascia l'elemento nel normale flusso 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 .


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





visibility