Propriedade do CSS Exibir | Explicado
Propriedade de exibição
Como o nome sugere, a propriedade CSS Display define como os elementos HTML são exibidos em uma página da web. Esta propriedade pode ser de grande utilidade quando você deseja mudar o comportamento usual de um elemento HTML. Suponha que, por algum motivo, você queira trocar o estado de um elemento embutido ao de um elemento em nível de bloco, então você pode usar essa propriedade para renderizar essa mudança.
Sintaxe
exibição: valor;Aqui demonstramos alguns valores de propriedade de exibição para sua melhor compreensão.
Elementos embutidos
Elementos que consomem apenas a quantidade necessária de espaço são chamados de elementos embutidos. Eles também podem ser referidos como elementos que são exibidos em uma linha.Esses elementos não começam de uma nova linha, além disso, você pode colocar vários elementos embutidos na mesma linha. Alguns exemplos são ,, etc.
Como converter elementos no nível do bloco em elementos embutidos usando a propriedade Display
Neste exemplo, estamos criando três elementos e definindo o valor da propriedade Display como "inline", portanto, todos os elementos serão exibidos em uma única linha e consumirão apenas a quantidade de espaço necessário.
Saída
Embora o elemento por padrão seja um elemento de nível de bloco, mas quando você define o valor da propriedade Display como "embutido", ele se comportará como um elemento embutido.
Elementos no nível do bloco
Elementos que consomem todo o espaço disponível (da esquerda para a direita) e começam de uma nova linha são considerados como elementos de nível de bloco. Os elementos do nível do bloco são capazes de manter elementos embutidos junto com outros elementos de nível de bloco. A maioria dos elementos no HTML são elementos de nível de bloco. Alguns exemplos são ,
- ,
- elemento.
, etc.
Como converter elementos embutidos em elementos de nível de bloco usando a propriedade Display
Para o bem deste exemplo, consideraremos dois elementos e definiremos o valor da propriedade Display para "bloquear". Como resultado, ambos os elementos consumirão todo o espaço horizontal, agindo como elementos no nível do bloco. Embora o elemento por padrão seja um elemento embutido.
Saída
Exibição flexível
Este valor ajusta com eficiência itens dentro de um recipiente. Distribui igualmente o espaço entre os elementos presentes em um recipiente.
Como funciona o valor flexível da propriedade de exibição
Neste exemplo, ilustramos o valor flexível da propriedade de exibição. Nós criamos cinco
elementos dentro de um elemento com classe flexível e atribuímos um valor "flex" à propriedade de exibição do
elementos.
Saída
Exibição da grade
O valor da grade da propriedade de exibição é útil ao estabelecer elementos na forma de uma grade, além disso, ao usar a grade, não há necessidade de utilizar carros alegóricos e posicionamento.
Como funciona o valor da grade da propriedade de exibição
Neste exemplo, criamos seis elementos dentro de um elemento maior com o Class-Container e atribuímos o valor de "grade" à propriedade de exibição do
elementos
Saída
Existem inúmeros outros valores que podem ser atribuídos à propriedade de exibição que são os seguintes.
| Valor | Descrição | |||||||||||||||||||||||
| em linha | Este valor exibe elementos como elementos embutidos. | |||||||||||||||||||||||
| bloquear | Este valor exibe elementos como elementos no nível do bloco. | |||||||||||||||||||||||
| conteúdo | Este valor faz um recipiente desaparecer. | |||||||||||||||||||||||
| flex | Este valor exibe elementos como contêineres flexíveis no nível do bloco. | |||||||||||||||||||||||
| grade | Este valor exibe elementos como contêineres de grade em nível de bloco. | |||||||||||||||||||||||
| Block inline | Este valor exibe elementos como contêineres de bloco em nível embutido. | |||||||||||||||||||||||
| inline-flex | Este valor exibe elementos como contêineres flexíveis em nível em linha. | |||||||||||||||||||||||
| grade embutida | Este valor exibe elementos como contêineres de grade em nível embutido. | |||||||||||||||||||||||
| Tabela em linha | Este valor exibe tabelas de nível embutido. | |||||||||||||||||||||||
| List-iteem | Este valor exibe todos os itens em um | |||||||||||||||||||||||
| correr em | Esse valor com base no contexto exibe elementos como elementos embutidos ou em nível de bloco. | |||||||||||||||||||||||
| mesa | Este valor torna elementos para se comportar como
Para uma melhor compreensão, você pode tentar alguns outros valores de exibição para ver como eles funcionam. Conclusão A propriedade CSS Exibir define como os elementos HTML são exibidos em uma página da web, além disso, usando essa propriedade, você pode alterar o comportamento padrão de um elemento HTML, por exemplo, você pode fazer com que um elemento embutido se comporte como elemento de nível de bloco e vice-versa. Existe uma vasta gama de valores que você pode aplicar na propriedade Display, cada um com um propósito diferente. Neste artigo, a propriedade Display é discutida em profundidade, juntamente com exemplos adequados. |