visibility:hidden和display:none的区别在于：

1.作用不同：visibility:hidden将元素隐藏，但是在网页中该占的位置还是占着。display:none将元素的显示设为无，即在网页中不占任何的位置。

2.使用后HTML元素有所不同：visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。

3.定义不同：visibility属性指定一个元素是否是可见的。display这个属性用于定义建立布局时元素生成的显示框类型。

元素隐藏和显示最常用的为 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 会引起重绘。

#挑战30天在头条写日记#