CSS元素的显示与隐藏

元素的显示与隐藏

类似网站的广告，当我们点击关闭时就不见了，但是当我们重新刷新页面，会重新出现。
其本质就是：让一个元素在页面中隐藏或显示出来

---

CSS中有三种属性能让元素显示与隐藏，分别是display、visibility、overflow

1.display属性
display属性用于设置一个元素应该如何显示

值	作用
display:none	隐藏对象
display:block	显示对象

display：blockv除了有转换为块级元素之外，同时还有显示元素的意思

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

---

2.visibility可见性
display属性用于设置一个元素可见还是隐藏

值	作用
visibility：visible	元素可视
visibility：hidden	元素隐藏

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

---

3.overflow溢出
overflow属性指定了如果内容溢出一个元素的框时，会发生什么

值	作用
visible	无影响
hidden	不显示超过框的内容
scroll	无论超出与否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示

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