front-end CSS(7) 显示与隐藏

display显示隐藏

元素被隐藏后，不保留原来的位置。
应用非常广泛，常搭配JS进行使用。
在HTML结构中只是被隐藏了，没有被删除。

display: none;//隐藏
display: block;//block的另外用法：显示

visibility显示隐藏

元素被隐藏后，仍旧保留原来的位置。

visibility: hidden;//隐藏
visibility: visible;//可见

overflow溢出显示隐藏

当内容超过宽高时，应该怎么处理溢出的内容，而不是隐藏整个盒子，这点和前面2个属性不同。
如果有定位的盒子，慎用这个隐藏。

overflow: hidden;//隐藏
overflow: visible;//可见，默认的
overflow: scroll;//加滚动条
overflow: auto;//在需要的时候添加滚动条，没超出就不加

案例：鼠标放上去，增加半透明遮罩效果

原理：原本遮罩不可见，鼠标经过时，遮罩可见。