CSS - display

Descrizione

La proprietà display influisce sulla presentazione più semplice di un elemento, classificando effettivamente l'elemento come un certo tipo di elemento. Il rendering dell'elemento può dipendere in larga misura dal tipo di visualizzazione e alcune proprietà funzioneranno solo su elementi che hanno valori di visualizzazione specifici.

Possibili valori

• inline- Questo valore fa sì che un elemento generi una casella a livello di riga; ad esempio, gli elementi HTML STRONG, CODE o EM (tra gli altri). L'elemento genererà una o più caselle in linea quando viene visualizzato.

• block- Questo valore fa sì che un elemento generi una casella a livello di blocco; ad esempio gli elementi HTML P, H1 o PRE (tra gli altri). L'elemento genererà una casella di blocco quando viene visualizzato.

• list-item- Questo valore fa sì che un elemento generi sia una casella di blocco che una casella in linea di elementi di elenco. In HTML, l'elemento LI è l'unico esempio di un tale elemento.

• run-in- In determinate condizioni, questo valore farà sì che l'elemento venga inserito. all'inizio del seguente elemento. Se un elemento A è impostato per visualizzare: run-in ed è seguito da un elemento a livello di blocco B, allora A diventa la prima casella a livello di riga di B. Se l'elemento che segue A non è a livello di blocco, A diventa un scatola a livello di blocco.

• compact - In determinate condizioni, questo valore farà sì che l'elemento venga posizionato su un lato dell'elemento successivo.

• marker- Questo valore imposta il contenuto generato come indicatore; pertanto, dovrebbe essere utilizzato solo in combinazione con gli pseudo-elementi: before e: after quando sono impostati su elementi a livello di blocco.

• table- Questo valore fa sì che un elemento generi una casella di tabella a livello di blocco. Questo è analogo all'elemento HTML TABLE.

• inline-table- Questo valore fa sì che un elemento generi una casella di tabella a livello di riga. Sebbene non vi sia alcun analogo in HTML, può essere immaginato come una tabella HTML tradizionale che può apparire nel mezzo di una riga di testo.

• table-cell- Questo valore dichiara che l'elemento è una cella di tabella. Questo è analogo all'elemento HTML TD.

• table-row- Questo valore dichiara che l'elemento è una riga di celle di tabella. Questo è analogo all'elemento HTML TR.

• table-row-group- Questo valore dichiara che l'elemento è un gruppo di righe di tabella. Questo è analogo all'elemento HTML TBODY.

• table-column- Questo valore dichiara l'elemento come una colonna di celle di tabella. Questo è analogo all'elemento HTML COL.

• table-column-group- Questo valore dichiara che l'elemento è un gruppo di colonne della tabella. Questo è analogo all'elemento HTML COLGROUP.

• table-header-group- Questo valore dichiara che l'elemento è un gruppo di celle che è sempre visibile nella parte superiore della tabella, posizionato prima di qualsiasi riga o gruppo di righe ma dopo qualsiasi didascalia della tabella allineata in alto. Questo è analogo all'elemento HTML THEAD.

• table-footer-group- Questo valore dichiara che l'elemento è un gruppo di celle che è sempre visibile nella parte inferiore della tabella, posizionato dopo qualsiasi riga o gruppo di righe ma prima di qualsiasi didascalia della tabella allineata in basso. Questo è analogo all'elemento HTML TFOOT.

• table-caption- Questo valore dichiara l'elemento come didascalia per una tabella. Questo è analogo all'elemento HTML CAPTION.

• none - L'elemento non genererà alcuna casella e quindi non verrà visualizzato né influirà sul layout del documento.

Si applica a

Tutti gli elementi HTML.

Sintassi DOM

object.style.cueAfter = url("music.wav");

Esempio

Ecco l'esempio:

<p style = "display:inline;">
   This paragraph will inline with the next paragraph
</p>

<p style = "display:inline;">
   and will make a single line.
</p>

<br />
<br />

<div style = "display:block;">
   This paragraph will be separate from the next paragraph
</div>

<div style = "display:block;">
   and this is second paragraph.
</div>

Questo produrrà il seguente risultato:

 This paragraph will inline with the next paragraph 
 and will make a single line. 





      

        This paragraph will be separate from the next paragraph 
      

      

        and this is second paragraph.