display:none和visibility:hidden两者的区别

分析: 这是一个比较容易出现错误的CSS问题, 没有大量实际开发经验的开发者, 很难了解它们之间的区别

display: none隐藏后的元素不占据任何空间

visibility: hidden隐藏后的元素空间依旧保留

visibility属性扩展:

• 1.visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性
• 2.visibility: hidden不会影响计数器的计数，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行
• 3.CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。