精灵图在现代前端中到底有用没，css中显示和隐藏竟有两种不同方式

css基础篇（第七篇）

回顾

在上一讲中我们基本上学习了css中定位的几种方式，包括定位在实际工作中常用的口诀等，除此之外还学习了margin：0 auto 水平居中的效果、未来常用的z-index等层叠。我们还详细的阐述了样式的书写顺序到底能不能影响渲染性能，如果没有看到的小伙伴可以看前一篇文章。这一讲我们将开启css基础篇的最后一讲。之后就要开始学习 css3 和 html5 了！

元素的显示与隐藏

dispaly

• display：none —— 隐藏对象，隐藏之后位置也不能占有
• display：block —— 除了转换元素之外，还是显示元素

visibility

• visibility：hidden —— 元素可以隐藏，但是位置还占有
• visibility：visible —— 元素显示

overflow 溢出

• overflow：hidden —— 不显示超过对象尺寸的内容，超出部分隐藏掉（隐藏的部分不占有位置） 如下图 所示
• overflow：visible —— 不剪切