CSS Layout
A
propriedade de exibição
Display é a
propriedade como especificar o elemento será exibido.
O valor de exibição
padrão para a maioria dos elementos é block ou inline.
Elementos de nível de bloco
O elemento <div> é um
elemento de nível de bloco.
Elementos embutidos
Este é um elemento <span> embutido dentro de um
parágrafo.
Mostrar nenhum;
O <script>elemento usa display: none; como
padrão.
Substituir o valor de exibição
padrão
<li> elementos embutidos para menus horizontais:
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>Exibir uma lista de links como um menu
horizontal:</p>
<ul>
<li><a
href="#" target="_blank">HTML</a></li>
<li><a
href="#" target="_blank">CSS</a></li>
<li><a
href="#" target="_blank">JavaScript</a></li>
</ul>
</body>
</html>
exibe elementos <span> como elementos de
bloco:
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
<h1>Exibir elementos de extensão como elementos de
bloco</h1>
<span>Uma propriedade de exibição com</span>
<span>um valor de "block" resulta em</span>
<span>uma quebra de linha entre cada elemento do vão. </span>
</body>
</html>
elementos <a> como elementos de bloco:
<!DOCTYPE html>
<html>
<head>
<style>
a {
display: block;
}
</style>
</head>
<body>
<h1>Exibir
links como elementos de bloco</h1>
<a
href="#" target="_blank">HTML</a>
<a
href="#" target="_blank">CSS</a>
<a
href="#" target="_blank">JavaScript</a>
</body>
</html>
Ocultar um elemento
display: 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.nome {
display: none;
}
</style>
</head>
<body>
<h1>Este é um título visível</h1>
<h1 class="nome">Esse será cabeçalho
oculto</h1>
<p>Observe que o elemento h1 com display: none; não
ocupa nenhum espaço.</p>
</body>
</html>
visibility:hidden; também esconde um elemento.
o elemento ainda ocupará o mesmo espaço de antes.
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>Este é um título visível</h1>
<h1 class="hidden">Esse cabeçalho oculto,
mas ocupará espaço.</h1>
<p>Observe que o cabeçalho oculto ainda ocupa
espaço..</p>
</body>
</html>