manual de referência CSS

regras CSS @

大全 de propriedades CSS

CSS vazio-Atributo cells Atributo direction do CSS

Método de uso e exemplo da propriedade CSS display

A propriedade CSS display especifica o tipo de caixa gerado pelo elemento.

A tabela a seguir fornece instruções de uso e histórico de versões deste atributo, bem como a sintaxe de uso no script JavaScript.

Valor padrão:	inline
Aplicável a:	Todos os elementos
Herança:	Nenhum
Animável:	Não.Veja também Propriedade de animação.
Versão:	CSS 1,2,3
Sintaxe JavaScript:	objeto.style.display="bloco"

Instruções de uso

O valor calculado da propriedade display pode ser diferente do elemento raiz eflutuanteouElementos de posicionamento absolutocom diferentes valores.
Se o valor da propriedade display for none, o elemento não gerará nenhum caixa e não terá nenhum impacto no layout; o elemento e seu conteúdo serão completamente removidos da estrutura de formatação e o documento será apresentado como se o elemento não existisse na árvore do documento.

Sintaxe de uso exibida

A sintaxe deste atributo é a seguinte:

display:  inline  |  bloco  |  conteúdos  |  flex  |  fluxo  |  fluxo-raiz  |  grelha  |  inline-bloco  |  inline-flex  |  inline-grelha  |  inline-tabela  |  lista-item  |  corrida-em  |  tabela  |  tabela-legenda  |  tabela-column-grupo  |  tabela-header-grupo  |  tabela-footer-grupo  |  tabela-row-grupo  |  tabela-célula  |  tabela-coluna  |  tabela-linha  |  nenhuma  |  inicial  |  herdar

O exemplo a seguir demonstra como usar a propriedade display.

Exemplo

　　div  {
　　　display:  inline;
　　}
　　span  {
　　　display:  bloco;
　　}

Teste e veja‹/›

Valor do atributo

A tabela a seguir descreve o valor deste atributo.

Valor	Descrição
inline	O elemento gera umNível inlinecaixa.
block	O elemento gera umBlococaixa.
contents	O elemento em si não gera nenhum bloco, mas seus filhosElementoePseudo-elementogera uma caixa de geração e o texto funciona normalmente.
flex	O elemento gera um bloco de nível blocoCaixa de contêiner de flexibilidade.
flow	O elemento usa alinhamento de fluxo (alinhamento de bloco e inline) para alinhar o conteúdo.
flow-root	O elemento gera um contêiner de bloco e usa alinhamento de fluxo para alinhar o conteúdo.
grid	Este elemento gera um contêiner de grade de nível bloco.
inline-block	O elemento gera um bloco, cuja disposição é como se fosse um bloco embutido.
inline-flex	O elemento gera um contêiner de flexibilidade de nível inline.
inline-grid	O elemento gera um contêiner de grade de nível inline.
inline-table	Este elemento se comporta como uma tabela, assim como um bloco inline.
list-item	O elemento gera um bloco para o conteúdo e um bloco inline para os marcadores da lista.
run-in	Este elemento gera um bloco ou um bloco inline com base no contexto.
table	O comportamento desse elemento é semelhante a<table>Elemento HTML.
table-caption	O comportamento desse elemento é semelhante a<caption>Elemento HTML.
table-column-group	O comportamento desse elemento é semelhante a<colgroup>Elemento HTML.
table-header-group	O comportamento desse elemento é semelhante a<thead>Elemento HTML.
table-footer-group	O comportamento desse elemento é semelhante a<tfoot>Elemento HTML.
table-row-group	O comportamento desse elemento é semelhante a<tbody>Elemento HTML.
table-cell	O comportamento desse elemento é semelhante a<td>Elemento HTML.
table-column	O comportamento desse elemento é semelhante a<col>Elemento HTML.
table-row	O comportamento desse elemento é semelhante a<tr>Elemento HTML.
none	Fechar a exibição do elemento. Mesmo que todos os atributos de exibição dos elementos filhos sejam definidos como none, a exibição também será fechada.
initial	Defina essa propriedade para seu valor padrão.
inherit	Se especificado, o elemento relacionado adota o valor do atributo display do pai.

Compatibilidade do navegador

Compatibilidade do navegador do atributo display, os números na tabela a seguir representam a versão mínima do navegador que suporta o atributo; todos os navegadores populares suportam esse atributo.

	Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 7+

Aviso:Valores, por exemplo, contents, flow-root, run-in e outros não são bem suportados em muitos navegadores. Melhor evitar seu uso temporariamente.