CSS元素的显示与隐藏

CSS元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。

本质：让一个元素隐藏或出现。

1.display

display 用于设置一个元素应如何显示。display属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout, grid或flex）。

• display: none ; 隐藏对象
• display: block; 除了转换为块级元素之外，还有显示元素的意思

display 隐藏元素后，不再占有原来的位置。

2.visibility

**visibility**显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 table 中的行或列。

/*    元素正常显示    */

visibility: visible;

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

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

visibility 隐藏元素后，继续占有原来的位置。

3.overflow

overflow 定义当一个元素的内容太大而无法适应**块级格式化上下文（BFC）**时候该做什么。它是 overflow-x 和 overflow-y 的简写属性。

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

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

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

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

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