display:none;visibility:hidden

1、空间：display:none;隐藏的元素不会占据空间，visibility:hidden隐藏的元素会占据空间，可以理解为这个透明了。
2、隐藏：父元素设置：display:none; 子元素再怎么操作都不会显示；如果父元素设置：visibility:hidden，子元素设置：visibility:visible;则子元素显示
3、回流和重绘：元素设置display:none; 产生回流和重绘（reflow 和 repaint），而 visibility:hidden 只产生重绘。
例子：

<div style="display: none;">
                    <p style="visibility: visible;">fasgasdg</p>  //隐藏
                </div>
                <div style="visibility: hidden;">
                    <p style="visibility: visible;">aefggsd</p>  //显示
                </div>

转载自：https://segmentfault.com/a/1190000013929168

回流：元素内容，位置、尺寸发生变化，需要重新计算样式和渲染树
重绘：元素只发生了一点点的变化，例如颜色变化，那样的话，只需要对元素进行重绘
https://segmentfault.com/a/1190000014474575