Visibilidade do CSS (Visibilidade)

A propriedade Visibility especifica se o elemento é visível ou oculto.

Especificar a visibilidade do elemento

Você pode usar a propriedade visibility para especificar se o elemento é visível ou oculto. Esta propriedade pode adotar um dos seguintes valores listados na tabela a seguir:

visibility: collapse; no entanto, as regras de estilo eliminarão os elementos internos da tabela, mas não afetarão de outra forma a disposição da tabela. O espaço ocupado pelos elementos de tabela geralmente será preenchido pelo preenchimento同级 subsequente.

Visibilidade vs Display no CSS

O CSS display e a propriedade visibility parecem ser a mesma coisa, mas na verdade são completamente diferentes e muitas vezes confundem os novos recursos do desenvolvimento da Web.

• visibility: hidden; oculta o elemento, mas ele ainda ocupa o espaço na disposição. Se a visibilidade dos elementos filhos da caixa oculta for definida como 'visível', eles serão visíveis.

• display: none; fecha a exibição e remove completamente o elemento do documento. Mesmo que seu HTML esteja no código-fonte, ele não ocupa espaço algum. Mesmo que todos os atributos de exibição dos elementos filhos sejam definidos como none, sua exibição será fechada.

Uso da propriedade Visibility

visibility:　visible
/*　O elemento é visível, valor padrão　*/
visibility:　hidden
/*　O elemento não é visível, mas ainda mantém o espaço correspondente　*/
visibility:　collapse
/*　Apenas funciona para objetos table, pode remover linhas ou colunas sem afetar o layout da tabela. Se este valor for usado em objetos além da table, ele se comporta como hidden.　*/
visibility: inherit
/*　Herda o valor visibility do elemento superior.　*/

Uso da propriedade Display

Existem muitos valores disponíveis para a propriedade Display, mas aqui nos concentramos apenas em alguns deles: block, none e inline

display: none
/*　O elemento é invisível e não é reservado espaço correspondente　*/
display: block
/*　Se apresenta como um elemento de nível de bloco (geralmente ocupa uma linha exclusiva)　*/
display: inline
/*　Se apresenta como um elemento de nível de linha (geralmente não ocupa uma linha exclusiva)　*/

Como podemos ver, embora as propriedades Visibility e Display possam ocultar um elemento, a diferença entre elas está naquilo que visibility: hidden mantém o espaço necessário para o elemento na página enquanto o elemento é ocultado, enquanto display: none se comporta como se o elemento fosse removido da página, não deixando evidente que o elemento ainda existe na página.
Além disso, a diferença entre display: block e display: inline está naquilo que block elemento ocupa uma linha exclusiva na página, enquanto o elemento inline não o faz. Alguns objetos são definidos como elementos block por padrão, enquanto outros são definidos como elementos inline. Preste atenção ao evitar definições repetidas de atributos idênticos ao usar.

Quando usar as propriedades Visibility ou Display