Show and hide CSS elements

Similar to website advertisements, when we click to close, they disappear, but when we refresh the page, they will reappear.

Essence: Make an element hide or appear.

1.display

displayUsed to set how an element should be displayed. displayThe attribute can set the internal and external display types of the element display types . The outer display types of an element will determine how the element behaves in a flow layout (block-level or inline elements); the inner display types of an element can control the layout of its child elements (for example: flow layout, grid or flex).

display: none ;hidden object
display: block;In addition to converting to block-level elements, it also means displaying elements

After display hides the element, it no longer occupies the original position.

2.visibility

** visibility**Show or hide elements without changing the layout of the document. This property can also hide tablerows or columns in the .

/*    元素正常显示    */

visibility: visible;

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

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

After visibility hides the element, it continues to occupy its original position.

3.overflow

overflowDefines what to do when an element's content is too large to fit in the **Block Formatting Context (BFC). It is a shorthand property for overflow-x and overflow-y .

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

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

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

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

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