元素隐藏和显示最常用的为 display:none 和 visibility: hiiden
display: none设置该属性后, 该元素下的元素都会隐藏, 占据的空间会消失
visibility: hidden 设置该属性后,元素虽然不可见了,但是依然占据空间的位置
区别:
- visibility具有继承性, 其子元素也会继承此属性,若设置visibility:visible,则子元素会显示
- visibility不会影响计数器的计算,虽然隐藏了,但是计数器依然继续运行着
- 在css3的transition可以支持viibility属性, 但是不支持display,因为transition可以延迟执行,因此配合visibility使用纯css实现hover延时显示效果可以提高用户体验
- display:none会引起回流(重排)和重绘,visibility:hidden会引起重绘
