技术交流QQ群:1027579432，欢迎你的加入！

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

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配合使用。

3.资料下载