display:none和visibility:hidden

做项目时遇到需要‘占坑却隐身’的元素。display:none能使元素隐藏，但原先占据的空间也消失了，所以不满足要求，这时便查到visibility:hidden可以定义这样的元素。

再深入了解两者区别时，发现两者除了占据空间的效果不一样之外，还有回流重绘和株连性的不同。

了解回流与重绘：浏览器的回流与重绘

株连性则是祖先元素的样式会影响子孙元素。

display:none会产生回流与重绘，影响前端性能，visibility:hidden则不会；display:none有株连性特性，visibility:hidden没有。

想了解更多，或者更深入些研究，可阅读这个文章：点击打开链接