Mostrar y ocultar elementos CSS

Al igual que los anuncios de sitios web, cuando hacemos clic para cerrar, desaparecen, pero cuando actualizamos la página, vuelven a aparecer.

Esencia: Hace que un elemento se oculte o aparezca.

1.pantalla

displaySe utiliza para establecer cómo se debe mostrar un elemento. displayEl atributo puede establecer los tipos de visualización internos y externos de los tipos de visualización de elementos . Los tipos de visualización externos de un elemento determinarán cómo se comporta el elemento en un diseño de flujo (elementos a nivel de bloque o en línea); los tipos de visualización internos de un elemento pueden controlar el diseño de sus elementos secundarios (por ejemplo: diseño de flujo, cuadrícula o flexible).

display: none ;objeto oculto
display: block;Además de convertir a elementos a nivel de bloque, también significa mostrar elementos

Después de que la pantalla oculta el elemento, ya no ocupa la posición original.

2.visibilidad

** visibility**Muestra u oculta elementos sin cambiar el diseño del documento. Esta propiedad también puede ocultar tablefilas o columnas en el archivo .

/*    元素正常显示    */

visibility: visible;

/*  隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为visible，则该子元素依然可见。   */
visibility: hidden;

/*用于 `table` 行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间（与将 `display: none` 用于表格的行/列上的效果相当）。但是，仍会计算其他行和列的大小，就好像折叠的行或列中的单元格一样。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度。*/
visibility: collapse;

Después de que la visibilidad oculta el elemento, continúa ocupando su posición original.

3. desbordamiento

overflowDefine qué hacer cuando el contenido de un elemento es demasiado grande para caber en el **Contexto de formato de bloque (BFC). Es una propiedad abreviada para overflow-x y overflow-y .

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 将溢出内容隐藏 */
overflow: hidden;

/* 无论内容是否溢出，总是显示滚动条 */
overflow: scroll;

/* 如果内容溢出，就会显示滚动条（未溢出则不显示） */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;