Cada elemento em uma página da web é uma caixa retangular. A propriedade display em CSS determina apenas como a caixa retangular se comporta. Existem apenas alguns valores que são comumente usados:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
O valor padrão para todos os elementos é embutido. A maioria das “Folhas de estilo do agente do usuário” (os estilos padrão que o navegador aplica a todos os sites) redefinem muitos elementos para “bloquear”. Vamos examinar cada um deles e, em seguida, abordar alguns dos outros valores menos comuns.
Em linha
O valor padrão para elementos. Pense em elementos como , ou e como envolver o texto nesses elementos em uma string de texto não interrompe o fluxo do texto.
O elemento possui uma borda vermelha de 1 px. Observe que ele está alinhado com o resto do texto.
Um elemento embutido aceitará margem e preenchimento, mas o elemento ainda permanece embutido como você pode esperar. A margem e o preenchimento apenas afastarão outros elementos horizontalmente, não verticalmente.
Um elemento embutido não aceitará heighte width. Ele simplesmente irá ignorá-lo.
Bloco Inline
Um elemento definido como inline-blocké muito semelhante ao inline, pois será definido inline com o fluxo natural do texto (na “linha de base”). A diferença é que você é capaz de definir um widthe heightque será respeitado.
Quadra
Vários elementos são definidos blockpela folha de estilo UA do navegador. Eles são geralmente elementos de contêiner, como , , e
. Também texto "blocos" como
e
. Os elementos de nível de bloco não ficam alinhados, mas passam por eles. Por padrão (sem definir uma largura), eles ocupam tanto espaço horizontal quanto possível.
Os dois elementos com as bordas vermelhas são
s que são elementos de nível de bloco. O elemento entre eles não fica embutido porque os blocos se quebram abaixo dos elementos embutidos.
Correr em
Primeiro, essa propriedade não funciona no Firefox. A palavra é que a especificação para ele não está bem definida o suficiente. Para começar a entendê-lo, é como se você quisesse que um elemento de cabeçalho ficasse alinhado com o texto abaixo dele. Flutuá-lo não funcionará e nem qualquer outra coisa, já que você não quer que o cabeçalho seja um filho do elemento de texto abaixo dele, você quer que ele seja seu próprio elemento independente. Em navegadores de “suporte”, é assim:
Mas não conte com isso.
Flexbox
A displaypropriedade também é usada para novos métodos de layout fangled, como Flexbox.
.header ( display: flex; )
Existem algumas versões mais antigas da sintaxe do flexbox, portanto, consulte este artigo para obter a sintaxe no uso do flexbox com o melhor suporte de navegador. Certifique-se de ver este guia completo do Flexbox.
Flow-Root
O flow-rootvalor de exibição cria um novo “contexto de formatação de bloco”, mas é diferente block. Um novo BFC ajuda com coisas como limpar floats, eliminando a necessidade de hacks para fazer isso.
.group ( display: flow-root; )
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
cromada
Raposa de fogo
IE
Beira
Safári
58
53
Não
79
13
Celular / Tablet
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13,0-13,1
Rede
O layout da grade também será definido inicialmente pela propriedade display.
body ( display: grid; )
Aqui está nosso guia sobre layout de grade, que inclui um gráfico de suporte ao navegador.
Nenhum
Remove totalmente o elemento da página. Observe que, embora o elemento ainda esteja no DOM, ele é removido visualmente e de qualquer outra forma concebível (você não pode clicar nele ou em seus filhos, ele é ignorado pelos leitores de tela, etc.).
Valores da Tabela
Existe todo um conjunto de valores de exibição que forçam os elementos que não são da tabela a se comportarem como elementos da tabela, se você precisar que isso aconteça. É raro, mas às vezes permite que você seja “mais semântico” com seu código enquanto utiliza os poderes de posicionamento exclusivos das tabelas.
