元素的显示和隐藏（display、visibility、overflow）

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

本质：让元素在页面中显示或者隐藏。

一、display 显示

display属性用于设置一个元素如何显示。

• display: none; 隐藏对象
• display: block; 转换为块级元素；显示元素

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

二、visibility 可见性

visibility属性用于指定一个元素可见还是隐藏。

• visibility: visible; 元素可视
• visibility: hidden; 元素隐藏

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

三、overflow 溢出

overflow属性用于指定内容溢出元素框的效果

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
srcoll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，慎用overflow: hidden 因为它会隐藏多余的部分。