O atributo de visibilidade em CSS é usado para definir se um elemento está visível. Você pode usar este atributo com JavaScript para criar menus ou layouts de páginas da web muito complexos. Por exemplo, ao fazer algumas perguntas de teste em uma página da web, você pode usar a visibilidade. atributo para alterar as respostas às perguntas ou ocultar a análise e exibi-la quando necessário.
Os valores possíveis para o atributo de visibilidade são os seguintes:
Exemplo:
1.visível
Uso visível (padrão)
Já que o valor da propriedade padrão é exibido. Portanto, todas as três caixinhas são exibidas.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Documento</title><style>div{largura:100px ;altura:100px;}.on e{cor de fundo: verde claro;}.dois{cor de fundo:palevioletred;}.três{cor de fundo:papayawhip;}</style></head><body><div></div><div> </div><div></div></body></html>Resultados em execução:
2. oculto
Quando definimos a primeira caixa pequena para não ser exibida (visibilidade: oculta;), a segunda caixa pequena ainda ocupa sua posição original.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Documento</title><style>div{largura:100px ;height:100px;}.one{fundo und-color:palegreen;visibility:hidden;}.two{background-color:palevioletred;}.três{background-color:papayawhip;}</style></head><body><div></div>< div></div><div></div></body></html>Resultados em execução:
Nota: Após a visibilidade ocultar o elemento, ele continuará ocupando sua posição original.
Se o elemento oculto quiser sua posição original, use visibilidade: oculto
Se o elemento oculto não quiser sua posição original, use display:none
3. herdar
Exemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Documento</title><style>.one,.two ,.três{largura:100px;altura:100px;}.um{cor de fundo:verde claro;}.dois{b cor de fundo: vermelho pálido;}.três{cor de fundo:papayawhip;}.quatro,.cinco{largura:50px;altura:50px;cor de fundo:powderblue;}</style></head><body>< div><div></div></div><div><div></div></div><div></div></body></html>Resultados em execução:
Ao usar o valor do atributo herdado.
(1) Como a primeira caixa verde grande está configurada para não ser exibida, a pequena caixa azul na primeira caixa herda o atributo oculto da caixa grande e não é exibida.
(2) A segunda pequena caixa azul herda o atributo de exibição padrão visível da grande caixa rosa, portanto é exibida.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Documento</title><style>.one,.two ,.três{largura:100px;altura:100px;}.um{cor de fundo:verde claro;visibilidade:oculto n;}.dois{cor de fundo:palevioletred;}.três{cor de fundo:papayawhip;}.quatro,.cinco{largura:50px;altura:50px;cor de fundo:powderblue;}</style></ cabeça><corpo><div><div></div></div><div><div></div></div><div></div></body></html>Resultados em execução:
