overflow、display、visibility的区别？

2019独角兽企业重金招聘Python工程师标准>>>

Overflow:hidden

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

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

Display:none

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

Visibility:hidden

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

他们大概有三点不同

（1）空间占据性（就是我们一般一般的小白理解的）

（2）回流与渲染性

（3）可怕的珠连性

第一点我们就不浪费口舌了，还是从第二点开始啦。display：none显示隐藏会产生回流和重绘的问题，影响前端的性能；而visibility：hidden则没有此问题的出现。所以在使用的时候要综合考虑，无论从性能还是功能。

不过平时我们的特效区别最多的可能还是第三点珠连性。

一般来说，我们给父元素设置了display：none，其后代子孙会全部消失；如果这时候出现一个需求需要显示某个子元素，这时候无论我们怎么设置，子 元素也不会出现的，所以巨坑爹有木有（话说百度笔试大题目就是考察的这点有木有，自我感觉良好，其实已经被封杀）。作为九头驴也拉不回来的想积极投身我大 前端的小白来说，着实头疼了，好吧，带着困惑我先来问问度娘吧，还是度娘实在，给我推荐了鑫旭前辈的一篇博文，待我仔细一瞅，嘿嘿，不错，正是妹子所需， 小心脏瞬间爆棚有木有。

哦啦，瞬间发现其中玄机，原来visibility：hidden木有珠连性，这时候我把父元素设置visibility：hidden，而子元素设置visibility：visible，孩子们就奇迹般的出现了，好开心有木有（我的http://blog.sina.com.cn/s/blog_8fa52d3f0101n6wh.html这篇博文就是利用了这一点写的一个css悬浮代码）。

接着overflow:hidden与height：0的组合运用

overflow是“溢出隐藏”，也就是盒子以外的元素全部切掉，加上height：0，一般的块状元素孩子元素会全部消失，但是存不存在特殊情况呢？

转载于:https://my.oschina.net/u/1040928/blog/173355