Exibição CSS (display) e visibilidade (visibilidade)

Seguinte: CSS Positioning (Posicionamento)

Como exibir um elemento propriedade é definida para ser exibida, atributo visibilidade especifica que um elemento deve ser visível ou oculto.

box 1

Caixa 2

box 3

elementos ocultos - display: none ou visibility: hidden

Ocultar um elemento de exibição do atributo definido como "none", ou a propriedade de visibilidade para "escondido". Note, no entanto, estes dois métodos irá produzir resultados diferentes.

visibility: hidden para esconder um elemento, mas elemento oculto permanece a mesma de antes da ocupação e não escondida espaço. Isto é, embora o elemento está oculto, mas ainda afectar a disposição.

Exemplos

h1.hidden {visibility:hidden;}

tente »

display: none para esconder um elemento, e os elementos ocultos não ocupam qualquer espaço. Em outras palavras, este elemento não só é escondida, eo espaço ocupado pelo elemento original desaparecerá do layout da página.

Exemplos

h1.hidden {display:none;}

tente »

CSS Display - Bloco e elementos inline

Bloco elemento é um elemento, ocupando toda a largura de um quebra de linha antes e depois.

Exemplos de elementos de bloco:

<H1>
<P>
<Div>

elementos em linha só precisa a largura necessária, não forçar quebras de linha.

Exemplos de elementos em linha:

<Span>
<a>

Como mudar um elemento de afixação

É possível alterar os elementos de bloco e elementos em linha, e vice-versa, pode fazer o olhar página é uma combinação de uma forma particular, e ainda seguir os padrões web.

O exemplo a seguir exibe os itens da lista de elementos em linha:

Exemplos

li {display:inline;}

tente »

Os seguintes elementos exemplo extensão como elementos de bloco:

Exemplos

span {display:block;}

tente »

Nota: Alterar o tipo de elementos de visualização para ver como o elemento é exibido, é que tipo de elementos.Por exemplo: um elemento inline definido para display: block não é permitido ter os seus próprios elementos de bloco aninhados internos.