English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La proprietà display CSS specifica il tipo di casella generata dall'elemento.
La tabella seguente fornisce spiegazioni sull'uso e la cronologia delle versioni di questa proprietà, nonché la sintassi dell'uso in script JavaScript.
| Valore predefinito: | inline |
|---|---|
| Applicabile a: | Tutti gli elementi |
| Ereditarietà: | No |
| Animabile: | No.Vedere Proprietà animazione. |
| Versione: | CSS 1, 2, 3 |
| Sintassi JavaScript: | object.style.display="block" |
Il valore calcolato di questa proprietà display potrebbe differire da quello dell'elemento radice eflottanteoElementi con posizionamento assolutovalori specifici.
Se il valore della proprietà display è impostato su none, l'elemento non genera alcuna casella e non ha alcun impatto sul layout; l'elemento e il suo contenuto vengono completamente rimossi dalla struttura di formato e il documento viene presentato come se l'elemento non esistesse nell'albero del documento.
La sintassi di questa proprietà è la seguente:
display: inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit
Gli esempi seguenti illustrano come utilizzare la proprietà display.
div {
display: inline;
}
span {
display: block;
}Testa per vedere‹/›La tabella seguente descrive i valori di questa proprietà.
| Valore | Descrizione |
|---|---|
| inline | Genera unLivello inlinecasella. |
| block | Genera unElemento bloccantecasella. |
| contents | L'elemento stesso non genera nessuna casella, ma i suoielementoeElemento pseudoGenera una casella e il testo funziona correttamente. |
| flex | Genera un blocco livello per l'elementoContenitore flessibile box. |
| flow | L'elemento utilizza il layout di flusso (layout di blocco e layout inline) per posizionare il contenuto. |
| flow-root | L'elemento genera un contenitore bloccante e utilizza il layout di flusso per posizionare il contenuto. |
| grid | Questo elemento genera un contenitore di griglia a livello bloccante. |
| inline-block | L'elemento genera un riquadro bloccante, il layout del quale sembra essere un contenitore incorporato. |
| inline-flex | L'elemento genera un contenitore di flessibilità a livello inline. |
| inline-grid | L'elemento genera un contenitore di griglia a livello inline. |
| inline-table | Questo elemento si comporta come una tabella, come un riquadro inline. |
| list-item | L'elemento genera un riquadro bloccante per il contenuto e un riquadro inline separato per i marchi della lista. |
| run-in | Questo elemento genera un blocco o un riquadro inline in base al contesto. |
| table | Il comportamento di questo elemento è simile a<table>Elemento HTML. |
| table-caption | Il comportamento di questo elemento è simile a<caption>Elemento HTML. |
| table-column-group | Il comportamento di questo elemento è simile a<colgroup>Elemento HTML. |
| table-header-group | Il comportamento di questo elemento è simile a<thead>Elemento HTML. |
| table-footer-group | Il comportamento di questo elemento è simile a<tfoot>Elemento HTML. |
| table-row-group | Il comportamento di questo elemento è simile a<tbody>Elemento HTML. |
| table-cell | Il comportamento di questo elemento è simile a<td>Elemento HTML. |
| table-column | Il comportamento di questo elemento è simile a<col>Elemento HTML. |
| table-row | Il comportamento di questo elemento è simile a<tr>Elemento HTML. |
| none | Chiude la visualizzazione dell'elemento. Anche se tutti gli attributi di visualizzazione dei figli sono impostati su none, la visualizzazione verrà chiusa. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato adotta il valore dell'attributo display dell'elemento padre. |
Compatibilità del browser con l'attributo display, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta l'attributo; tutti i browser mainstream supportano questa proprietà.
|
Attenzione:Valori, ad esempio contents, flow-root, run-in, sono supportati male da molti browser. Meglio evitare di usarli temporaneamente.
Si prega di consultare la seguente guida:CSS Display.
Proprietà correlate:visibility,float,position.