CSS - exibição

Descrição

A propriedade display afeta a apresentação mais básica de um elemento, classificando efetivamente o elemento como um determinado tipo de elemento. A renderização do elemento pode depender muito de seu tipo de exibição e certas propriedades funcionarão apenas em elementos que possuem valores de exibição específicos.

Valores possíveis

  • inline- Este valor faz com que um elemento gere uma caixa de nível embutido; por exemplo, os elementos HTML STRONG, CODE ou EM (entre outros). O elemento irá gerar uma ou mais caixas embutidas quando for exibido.

  • block- Este valor faz com que um elemento gere uma caixa em nível de bloco; por exemplo, os elementos HTML P, H1 ou PRE (entre outros). O elemento irá gerar uma caixa de bloco quando for exibido.

  • list-item- Este valor faz com que um elemento gere uma caixa de bloco e uma caixa embutida de item de lista. Em HTML, o elemento LI é o único exemplo de tal elemento.

  • run-in- Sob certas condições, este valor fará com que o elemento seja inserido. no início do seguinte elemento. Se um elemento A é definido para exibir: run-in e é seguido por um elemento de nível de bloco B, então A se torna a primeira caixa de nível inline de B. Se o elemento após A não for de nível de bloco, então A se torna um caixa de nível de bloco.

  • compact - Sob certas condições, este valor fará com que o elemento seja colocado ao lado do elemento seguinte.

  • marker- Este valor irá definir o conteúdo gerado para ser um marcador; portanto, ele deve ser usado apenas em conjunto com os pseudo-elementos: before e: after quando eles são definidos em elementos de nível de bloco.

  • table- Este valor faz com que um elemento gere uma caixa de tabela em nível de bloco. Isso é análogo ao elemento HTML TABLE.

  • inline-table- Este valor faz com que um elemento gere uma caixa de tabela de nível embutido. Embora não haja um análogo no HTML, ele pode ser visualizado como uma tabela HTML tradicional que pode aparecer no meio de uma linha de texto.

  • table-cell- Este valor declara o elemento como uma célula da tabela. Isso é análogo ao elemento HTML TD.

  • table-row- Este valor declara que o elemento é uma linha de células da tabela. Isso é análogo ao elemento HTML TR.

  • table-row-group- Este valor declara o elemento como um grupo de linhas da tabela. Isso é análogo ao elemento HTML TBODY.

  • table-column- Este valor declara o elemento como uma coluna de células da tabela. Isso é análogo ao elemento HTML COL.

  • table-column-group- Este valor declara o elemento como um grupo de colunas da tabela. Isso é análogo ao elemento HTML COLGROUP.

  • table-header-group- Este valor declara que o elemento é um grupo de células que está sempre visível no topo da tabela, colocado antes de qualquer linha ou grupo de linhas, mas após quaisquer legendas de tabela alinhadas no topo. Isso é análogo ao elemento HTML THEAD.

  • table-footer-group- Este valor declara o elemento como um grupo de células que está sempre visível na parte inferior da tabela, colocado após qualquer linha ou grupo de linhas, mas antes de quaisquer legendas de tabela alinhadas na parte inferior. Isso é análogo ao elemento HTML TFOOT.

  • table-caption- Este valor declara que o elemento é uma legenda para uma tabela. Isso é análogo ao elemento HTML CAPTION.

  • none - O elemento não gerará nenhuma caixa e, portanto, não será exibido nem afetará o layout do documento.

Aplica-se a

Todos os elementos HTML.

Sintaxe DOM

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

Exemplo

Aqui está o exemplo -

<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>

Isso produzirá o seguinte resultado -

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.