La display proprietà è la proprietà CSS più importante per il controllo del layout.
Il display Property
La display proprietà specifica se / come viene visualizzato un elemento.
Ogni elemento HTML ha un valore di visualizzazione di default a seconda del tipo di elemento che è. Il valore di visualizzazione predefinita per la maggior parte degli elementi è block o inline .
Clicca per vedere pannello
Questo pannello contiene un <div> elemento, che è nascosta per impostazione predefinita ( display: none ).
Si è in stile con i CSS, e usiamo JavaScript per mostrare (cambiarlo ( display: block ).
Gli elementi a livello di blocco
Un elemento di blocco inizia sempre in una nuova riga e occupa l'intera larghezza disponibile (estende a sinistra ea destra per quanto possibile).
Esempi di elementi a livello di blocco:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Elementi in linea
Un elemento inline non inizia una nuova riga e occupa solo tanto larghezza necessaria.
Si tratta di una linea <span> elemento all'interno di un paragrafo.
Esempi di elementi in linea:
- <span>
- <a>
- <img>
Display: none;
display: none; è comunemente utilizzato con JavaScript per nascondere e mostrare elementi senza eliminazione e ricreare. Date un'occhiata al nostro ultimo esempio in questa pagina se si desidera sapere come questo può essere realizzato.
Il <script> elemento uso display: none; come il suo predefinito.
Ignorare l'impostazione predefinita di visualizzazione Valore
Come detto, ogni elemento ha un valore predefinito di visualizzazione. Tuttavia, è possibile ignorare questo.
La modifica di un elemento inline per un elemento di blocco, o viceversa, può essere utile per rendere la pagina di sembrare un modo specifico, e ancora seguire gli standard web.
Un esempio comune è fare in linea <li> elementi per i menu orizzontali:
 | Nota: L'impostazione della proprietà di visualizzazione di un elemento cambia solo la modalità di visualizzazione dell'elemento, non il tipo di elemento che è.Quindi, un elemento in linea con display: block; non è permesso avere altri elementi di blocco all'interno di esso. |
|---|
L'esempio seguente visualizza <span> elementi come elementi di blocco:
Nascondere un elemento - display:none o visibility:hidden ?
Nascondere un elemento può essere fatto impostando la display di proprietà di none . L'elemento sarà nascosto, e la pagina viene visualizzata come se l'elemento non è lì:
visibility:hidden; nasconde anche un elemento.
Tuttavia, l'elemento vorrà ancora lo stesso spazio di prima. L'elemento sarà nascosto, ma influenzano ancora il layout:
Altri esempi
display: none; contro visibility: hidden;
Questo esempio dimostra display: none; contro visibility: hidden;
Utilizzando i CSS con Javascript per mostrare contenuti
Questo esempio dimostra come utilizzare i CSS e JavaScript per mostrare un elemento al clic.
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»
CSS Mostra / Proprietà Visibilità
| Proprietà | Descrizione |
|---|---|
| display | Specifica come deve essere visualizzato un elemento |
| visibility | Specifica se un elemento deve essere visibile |