Visibilidad de CSS (Visibilidad)

La propiedad de visibilidad especifica si el elemento es visible o oculto.

Especificar la visibilidad del elemento

Puede usar la propiedad visibility para especificar si el elemento es visible o no. Esta propiedad puede adoptar uno de los siguientes valores enumerados en la tabla a continuación:

visibility: collapse; sin embargo, las reglas de estilo eliminarán los elementos internos de la tabla, pero no afectarán de otra manera el diseño de la tabla. El espacio ocupado por los elementos de tabla generalmente se llenará con el relleno del elemento同级.

CSS Visibility vs Display

CSS display vs visibility parece que es lo mismo, pero en realidad son completamente diferentes y a menudo confunden a los nuevos desarrolladores web.

• visibility: hidden; oculta el elemento, pero aún ocupa el espacio en el diseño. Si la visibilidad de los elementos hijos de la caja oculta se establece en 'visible', también serán visibles.

• display: none; cierra la visualización y elimina completamente el elemento del documento. Incluso si su HTML sigue en el código fuente, no ocupa ningún espacio. Incluso si todos los atributos de visualización de los elementos hijos se establecen en none, también cerrará su visualización.

Uso de la propiedad de visibilidad

visibility:　visible
/*　El elemento es visible, valor predeterminado　*/
visibility:　hidden
/*　El elemento no es visible, pero se le reserva el espacio correspondiente　*/
visibility:　collapse
/*　Actúa solo en objetos table, puede eliminar filas o columnas sin afectar el diseño de la tabla. Si se usa en objetos fuera de table, se muestra como hidden.　*/
visibility: inherit
/*　Hereda el valor de visibility del elemento superior.　*/

Uso de la propiedad Display

Hay muchos valores disponibles para la propiedad Display, pero aquí solo nos concentramos en algunos de ellos: block, none y inline

display: none
/*　El elemento es invisible y no se le reserva el espacio correspondiente　*/
display: block
/*　Se comporta como un elemento de bloque (generalmente ocupa una línea)　*/
display: inline
/*　Se comporta como un elemento en línea (generalmente no ocupa una línea)　*/

Como se puede ver, aunque las propiedades Visibility y Display pueden ocultar un elemento, la diferencia entre ellas radica en que visibility: hidden mantiene el espacio necesario del elemento en la página mientras lo oculta, mientras que display: none actúa como si el elemento se eliminara del página, sin que se pueda ver que el elemento sigue existiendo.
Además, la diferencia entre display: block y display: inline radica en que el elemento block ocupa una línea en la página, mientras que el elemento inline no lo hace. Algunos objetos son por defecto elementos block, mientras que otros son por defecto elementos inline. Deben prestar atención a evitar la repetición de definiciones de propiedades idénticas al usarlos.

Cuándo usar las propiedades Visibility o Display