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,一般的块状元素孩子元素会全部消失,但是存不存在特殊情况呢?