CSS技巧篇(二):visibility:hidden和display:none的區別

一、子元素的繼承

1、如果後代元素的visibility屬性存在則不會繼承其父元素的visibility屬性值,不存在纔會繼承其父元素的visibility屬性值。例如:父元素的visibility爲hidden但是子元素的visibility爲visible則子元素依舊可見;子元素visibility不存在則子元素繼承父元素的visibility值爲hidden。
2、父元素的display爲none,則其後的所有元素都將不可見。

二、佔據空間

1、visibility:hidden時,雖然其內容被隱藏,但是它所處的空間仍然被空白所佔據。
2、display:none時,內容和空間都被隱藏,如同元素不存在一樣。

height="400" width="700" scrolling="no" title="display與visibility的區別" src="//codepen.io/madman0621/embed/oPwYNe/?height=265&theme-id=light&default-tab=html,result&embed-version=2" allowfullscreen="true">See the Pen display與visibility的區別 by madman0621 (@madman0621) on CodePen.
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章