A displaypropriedade é a propriedade CSS mais importante para controlar o layout.
A propriedade de exibição
A displaypropriedade especifica se / como um elemento é exibido.
Todo 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 é blockou inline.
Elementos em nível de bloco
Um elemento no nível do bloco sempre inicia em uma nova linha e ocupa toda a largura disponível (se estende para a esquerda e direita, tanto quanto possível).
Exemplos de elementos em nível de bloco:
Um elemento embutido não inicia em uma nova linha e ocupa apenas a largura necessária.
Exemplos de elementos embutidos:
Mostrar nenhum;
display: none;é comumente usado com JavaScript para ocultar e mostrar elementos sem excluí-los e recriá-los.
Dê uma olhada no nosso último exemplo nesta página, se você quiser saber como isso pode ser alcançado.
O <script>elemento usa display: none; como padrão.
Substituir o valor de exibição padrão
Como mencionado, todo elemento tem um valor de exibição padrão. No entanto, você pode substituir isso.
Alterar um elemento embutido para um elemento de bloco, ou vice-versa, pode ser útil para fazer com que a página tenha uma aparência específica e ainda siga os padrões da web.
Um exemplo comum é criar <li>elementos embutidos para menus horizontais:
Exemplo
li {
display: inline;
}
Nota: A configuração da propriedade de exibição de um elemento altera apenas a forma como o elemento é exibido , NÃO o tipo de elemento que é. Portanto, um elemento inline com display: block;não pode ter outros elementos de bloco dentro dele.
Ocultar um elemento – exibição: nenhuma ou visibilidade: oculta?
Escondendo um elemento pode ser feito definindo a displaypropriedade para none. O elemento ficará oculto e a página será exibida como se o elemento não estivesse lá:
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>
</body>
</html>
visibility:hidden; também oculta um elemento.
No entanto, o elemento ainda ocupará o mesmo espaço que antes. O elemento ficará oculto, mas ainda afetará o layout:
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>
</body>
</html>
<< Anterior Tabelas CSS
Deixe um comentário