overflow、display、visibility的區別？

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，通常的塊狀元素孩子元素會所有消失，可是存不存在特殊狀況呢？