El atributo de visibilidad en CSS se usa para establecer si un elemento es visible. Puede usar este atributo con JavaScript para crear menús o diseños de páginas web muy complejos. Por ejemplo, al realizar algunas preguntas de prueba en una página web, puede usar la visibilidad. atributo para cambiar las respuestas a las preguntas u ocultar el análisis y mostrarlo cuando sea necesario.
Los valores posibles para el atributo de visibilidad son los siguientes:
Ejemplo:
1.visible
Uso visible (predeterminado)
Dado que se muestra el valor de propiedad predeterminado. Entonces se muestran los tres pequeños cuadros.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=ancho del dispositivo,initial-scale=1.0><title>Documento</title><style>div{ancho:100px ;altura:100px;}.uno{fondo-color:palegreen;}.dos{fondo-color:palevioletred;}.tres{fondo-color:papayawhip;}</style></head><body><div> </div><div></div><div></div></body></html>Resultados de ejecución:
2.oculto
Cuando configuramos el primer cuadro pequeño para que no se muestre (visibilidad: oculto;), el segundo cuadro pequeño aún ocupa su posición original.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=ancho del dispositivo,initial-scale=1.0><title>Documento</title><style>div{ancho:100px ;altura:100px;}.uno{fondo-color:verde pálido;visibilidad:hidden;}.dos{fondo-color:palevioletred;}.tres{fondo-color:papayawhip;}</estilo></cabeza><cuerpo ><div></div><div></div><div></div></body></html>Resultados de ejecución:
Nota: Después de que la visibilidad oculta el elemento, continúa ocupando su posición original.
Si el elemento oculto quiere su posición original, use visibilidad: oculto
Si el elemento oculto no quiere su posición original, use display:none
3.heredar
Ejemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Documento</title><style>.one,.two ,.tres{ancho:100px;alto:100px;}.uno{fondo-color:palegreen;}.dos{fondo-color:palevioletred;}.tres{fondo-color:papayawhip;}.cuatro,.cinco{ancho :50px;altura:50px;color de fondo:azul polvo;}</style></head><body><div><div></div></div><div><div></div>< /div><div></div></body></html>Resultados de ejecución:
Cuando se utiliza el valor del atributo heredado.
(1) Dado que el primer cuadro verde grande está configurado para no mostrarse, el pequeño cuadro azul en el primer cuadro hereda el atributo oculto del cuadro grande y no se muestra.
(2) El segundo cuadro azul pequeño hereda el atributo de visualización predeterminado visible del cuadro rosa grande, por lo que se muestra.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Documento</title><style>.one,.two ,.tres{ancho:100px;alto:100px;}.uno{fondo-color:palegreen;visibilidad:hidden;}.dos{fondo-color:palevioletred;}.tres{fondo-color:papayawhip;}.cuatro, .cinco{ancho:50px;alto:50px;fondo-color:azul polvo;}</style></head><body><div><div></div></div><div><div>< /div></div><div></div></body></html>Resultados de ejecución:
