display：none 与 visibility：hidden 的区别

display:none 和 visibility:hidden都是隐藏元素

dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失

visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置

区别

1.visibility 具有继承性，其子元素也会继承此属性，若设置visibility:visible，则子元素会显示

2.visibility 不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行。

3.在 CSS3 的 transition 中支持 visibility 属性，但是不支持display，因为 transition 可以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户体验

4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘