A display propriedade é a propriedade CSS mais importante para controlar o layout.
A propriedade de exibição
A display propriedade especifica se / como um elemento é exibido.
Cada elemento HTML tem um valor de exibição padrão, dependendo do tipo de elemento que é. O valor de exibição padrão para a maioria dos elementos é block ou inline .
Clique para mostrar o painel
Este painel contém um <div> elemento, que está oculta por padrão ( display: none ).
Ele é denominado com CSS, e usamos JavaScript para mostrá-lo (alterá-lo para ( display: block ).
Elementos em nível de bloco
Um elemento em nível de bloco começa sempre em uma nova linha e ocupa toda a largura disponível (estende-se à esquerda e à direita o mais longe que puder).
Exemplos de elementos em nível de bloco:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
inline Elements
Um elemento inline não iniciar em uma nova linha e só ocupa tanto largura como necessário.
Este é um inline <span> elemento dentro de um parágrafo.
Exemplos de elementos em linha:
- <span>
- <a>
- <img>
Display: none;
display: none; é comumente usado com JavaScript para ocultar e mostrar elementos sem excluir e recriá-los. Dê uma olhada em nosso último exemplo nesta página se você quiser saber como isso pode ser alcançado.
O <script> elemento usar display: none; como padrão.
Substituir a indicação do valor padrão
Como mencionado, cada elemento tem um valor de exibição padrão. No entanto, você pode substituir esse.
Mudar um elemento inline para um elemento de bloco, ou vice-versa, pode ser útil para fazer a página parecer uma maneira específica, e ainda seguir os padrões da web.
Um exemplo comum está fazendo em linha <li> elementos para menus horizontais:
 | Nota: Definir a propriedade de um elemento de exibição só muda a forma como o elemento é exibido, não o tipo de elemento que é.Assim, um elemento inline com display: block; não é permitido ter outros elementos de bloco dentro dela. |
|---|
O exemplo a seguir exibe <span> elementos como elementos de bloco:
Ocultar um elemento - display:none ou visibility:hidden ?
Escondendo um elemento pode ser feito definindo a display propriedade para none . O elemento será escondido, e a página será exibido como se o elemento não está lá:
visibility:hidden; também esconde um elemento.
No entanto, o elemento ainda vai ocupar o mesmo espaço que antes. O elemento será escondido, mas ainda afetam o layout:
mais Exemplos
display: none; contra visibility: hidden;
Este exemplo demonstra display: none; contra visibility: hidden;
Usando CSS juntamente com JavaScript para mostrar o conteúdo
Este exemplo demonstra como usar CSS e JavaScript para mostrar um elemento com um clique.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»
CSS Monitor / Propriedades Visibilidade
| Propriedade | Descrição |
|---|---|
| display | Especifica como um elemento deve ser exibido |
| visibility | Especifica se um elemento deve ser visível |