Layout CSS - La proprietà display
La display
proprietà è la proprietà CSS più importante per il controllo del layout.
La proprietà di visualizzazione
La display
proprietà specifica se/come viene visualizzato un elemento.
Ogni elemento HTML ha un valore di visualizzazione predefinito a seconda del tipo di elemento che è. Il valore di visualizzazione predefinito per la maggior parte degli elementi è block
o
inline
.
Fare clic per mostrare il pannello
This panel contains a <div> element, which is hidden by default (display: none
).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block
).
Elementi a livello di blocco
Un elemento a livello di blocco inizia sempre su una nuova riga e occupa l'intera larghezza disponibile (si estende a sinistra ea destra il più possibile).
Esempi di elementi a livello di blocco:
- <div>
- <h1> - <h6>
- <p>
- <modulo>
- <intestazione>
- <piè di pagina>
- <sezione>
Elementi in linea
Un elemento inline non inizia su una nuova riga e occupa solo la larghezza necessaria.
Questo è un elemento <span> inline all'interno di un paragrafo.
Esempi di elementi in linea:
- <span>
- <a>
- <img>
Display: nessuno;
display: none;
è comunemente usato con JavaScript per nascondere e mostrare elementi senza eliminarli e ricrearli. Dai un'occhiata al nostro ultimo esempio in questa pagina se vuoi sapere come questo può essere ottenuto.
L' <script>
elemento utilizza display: none;
come predefinito.
Sostituisci il valore di visualizzazione predefinito
Come accennato, ogni elemento ha un valore di visualizzazione predefinito. Tuttavia, puoi ignorarlo.
Cambiare un elemento inline in un elemento block, o viceversa, può essere utile per far sembrare la pagina in un modo specifico e continuare a seguire gli standard web.
Un esempio comune è la creazione di <li>
elementi in linea per i menu orizzontali:
Esempio
li {
display: inline;
}
Nota: l'impostazione della proprietà di visualizzazione di un elemento cambia solo la modalità di visualizzazione dell'elemento , NON il tipo di elemento. Quindi, un elemento inline con display: block;
non può avere altri elementi di blocco al suo interno.
L'esempio seguente mostra gli elementi <span> come elementi di blocco:
Esempio
span {
display: block;
}
L'esempio seguente mostra gli elementi <a> come elementi di blocco:
Esempio
a {
display: block;
}
Nascondi un elemento - display:nessuno o visibilità:nascosto?
display:none
visibility:hidden
Ripristina
È possibile nascondere un elemento impostando la display
proprietà su
none
. L'elemento verrà nascosto e la pagina verrà visualizzata come se l'elemento non fosse presente:
Esempio
h1.hidden {
display: none;
}
visibility:hidden;
nasconde anche un elemento.
Tuttavia, l'elemento occuperà comunque lo stesso spazio di prima. L'elemento sarà nascosto, ma influirà comunque sul layout:
Esempio
h1.hidden {
visibility: hidden;
}
Altri esempi
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
Property | Description |
---|---|
display | Specifies how an element should be displayed |
visibility | Specifies whether or not an element should be visible |