En CSS, un elemento oculto hay muchas maneras, vamos a introducir una por una
1, establecer la opacidad
opacity: 0;
La opacidad del elemento se establece en 0, pero este elemento todavía va a ocupar sus posiciones originales, pero no es visible en lo visual
No cambia el diseño de la página, también puede responder a las acciones del usuario
2, establecer la visibilidad
visibility: hidden;
La visibilidad del elemento se establece en ocultar, por lo que este elemento no es visible, pero aún ocupa su posición original
No cambia el diseño de la página, pero no puede responder a las acciones del usuario
Además, los descendientes de este elemento serán puestos a ocultar, pero se puede dar a los elementos descendientes establecer explícitamente la visibilidad Para mostrar visibles
3, un modo de visualización
display: none;
Este es un elemento oculto en el verdadero sentido, no ocupa el espacio original, como si este elemento no debe existir como
Esto significa que se ha cambiado el diseño de la página, como es natural, no puede responder a las acciones del usuario
Además, los descendientes de este elemento serán puestos a ocultar
4, un modo de posicionamiento
position: absolute;
top: -999px;
left: -999px;
Fije los elementos de los métodos de orientación a la posición absoluta, por lo que puede hacer que un elemento del flujo del documento
A continuación, establezca la izquierda y la parte superior de un número negativo grande, el elemento de fuera de la región visible, ocultando elementos de implementación
Por último agregar una propiedad, desbordamiento, cuando el contenido excede el predeterminado para el bloque elemento de cómo procesar valores opcionales como sigue:
visible
: Más allá del contenido se mostrará fuera de los elementos de la cajahidden
: Más allá del contenido se recortaráscroll
: Mostrar siempre la barra de desplazamiento, se puede tirar el contenido de la barra de desplazamiento para ver más alláauto
: Cuando el contenido no supere los elementos caja, no se muestran barras de desplazamiento cuando el contenido excede la caja del elemento, a las barras de desplazamiento de la pantalla
[Leer más series CSS, consulte las notas de estudio CSS ]