技术交流QQ群:1027579432，欢迎你的加入！
欢迎关注我的微信公众号：CurryCoder的程序人生
- 类似网站广告，当我们点击关闭就不见了。但是，当我们重新刷新页面时，广告又会重新出现！
- 本质：让一个元素在页面中隐藏或显示出来！
1.三种显示与隐藏方式
- display显示隐藏
- visibility显示隐藏
- overflow溢出显示隐藏
1.1 display属性
- display属性用于设置一个元素应该如何显示。
- display: none; 隐藏对象
- display: block; 除了转换为块级元素外，同时还有显示元素的意思
- display隐藏元素后，不再占有原来的位置。(脱标！)
- 后面应用极其广泛，搭配JS可以做很多的网页特效！
1.2 visibility可见性
- visibility属性用于指定一个元素应该是可见的还是隐藏的。
- visibility：visible; 元素可视
- visibility：hidden; 元素隐藏
- visibility隐藏元素后，继续占有原来的位置。(不脱标！)
- 如果隐藏元素想继续占有原来的位置，就visibility: hidden;
- 如果隐藏元素不想继续占有原来的位置，就display: none（用处更多，重点）;
1.3 overflow溢出
溢出解释.png
-
overflow属性指定了如果内容溢出一个元素的框(超过其指定的高度和宽度)时，会发生什么。
overflow属性值.png - 一般情况下，我们不想让溢出部分的内容显示出来，因为它会影响布局。
- 但是，如果有定位的盒子，请谨慎使用overflow: hidden;因为它会隐藏多余的部分。
2.土豆网鼠标经过显示遮蔽案例
- display显示隐藏元素，但是不保留位置；
- visibility显示隐藏元素，但是保留原来的位置；
- overflow溢出显示隐藏，但是只是对于溢出的部分处理；
- 案例的核心原理：原先半透明的黑色遮蔽是看不见的，但是鼠标经过大盒子时，就会显示出来。
- 遮蔽的盒子是不占有位置的，此时就需要绝对定位和display配合使用。
