CSS中的display：none、overflow：hidden和visibility:hidden的比较

一、

1、Display:none

使用此属性之后元素不存在了，元素占据的位置也不存在。

2、Visibility:hidden

使用此属性之后元素不存在了，元素占据的位置依然存在

3、Overflow:hidden

对行内元素无效，必须是块级元素，并且设置宽度高度。

Overflow:hidden,隐藏之后元素依然占据着位置。

二、diaplay：none与visibility：hidden的区别

（1）空间占据性      display：none不占据空间，visibility:hidden占据空间

（2）回流与渲染性  display：none会产生回流与重绘，visibility：hidden则不会

（3）株连性             display：none有株连性，visibility：hidden不具备株连性

display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。

应用了visibility:hidden声明下的子孙元素如要显示可加上visibility:visible

三、height:0和overflow:hidden的组合

一句话的事：

position: absolute元素溢出overflow: hidden元素的时候，如果其第一个含有position属性(static除外)的祖先元素（一直到body）是overflow: hidden元素祖先元素的时候，则不隐藏；否则，隐藏

参考:https://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/