摘自张鑫旭老师的博客——

display:none和visibility:hidden都能使元素隐藏，但是有明显区别，主要有以下三点：

1. 空间占据
2. 重排与重绘
3. 株连性

1、空间占据。

使用display隐藏后，元素不占用任何空间，而visibility占据的空间仍在。

2、重排与重绘

reflow和repaint。由于display隐藏后占据的空间不存在了，所以导致页面的重排与重绘；而visibility占据空间仍在，不引起重排重绘，所以前者会对性能产生影响。

3、株连性

如果父元素应用了display：none，那么子元素无论如何都没有办法显示出来，所以其具有明显的“株连性”；visibility在父元素hidden后，如果子元素应用了visible，那么子元素仍然会显示出来。

css-display:none和visibility：hidden的不同