【Vichy的学习日记 #9】CSS元素的显示与隐藏

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

• display显示隐藏
• visibility显示隐藏
• overflow溢出显示隐藏

一.display属性

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

• display:none;设置一个元素如何显示
• display:block;转为块级元素、显示元素

display隐藏元素后，不再占有原来的位置（搭配JS可以做网页特效）

二.visibility可见性

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

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

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

• 如果隐藏元素想要原来位置 visibility:hidden;
• 如果隐藏元素不想要原来位置 display:none;

三.overflow溢出

overflow属性指定了如果内容溢出一个元素的框（超过其指定的高度及宽度）时，会发生什么。

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

一般情况下，我们都不想让溢出的部分内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，慎用overflow:hidden;因为它会隐藏多余的部分