display:none和visibility:hidden两者的区别
使用css讓元素不可見的方法有很多種，裁剪、定位到屏幕外邊、透明度變換等都是可以的。但是最常用兩種方式就是設(shè)置元素樣式為display: none或者visibility: hidden。很多公司的面試官也常常會(huì)問面試者這兩者之間的區(qū)別。
display與元素的隱藏
如果給一個(gè)元素設(shè)置了display: none，那么該元素以及它的所有后代元素都會(huì)隱藏，它是前端開發(fā)人員使用頻率最高的一種隱藏方式。隱藏后的元素?zé)o法點(diǎn)擊，無法使用屏幕閱讀器等輔助設(shè)備訪問，占據(jù)的空間消失。
效果圖：
visibility與元素的隱藏
給元素設(shè)置visibility: hidden也可以隱藏這個(gè)元素，但是隱藏元素仍需占用與未隱藏時(shí)一樣的空間，也就是說雖然元素不可見了，但是仍然會(huì)影響頁面布局。
效果圖:
display: none與visibility: hidden的區(qū)別
很多前端的同學(xué)認(rèn)為visibility: hidden和display: none的區(qū)別僅僅在于display: none隱藏后的元素不占據(jù)任何空間，而visibility: hidden隱藏后的元素空間依舊保留 ，實(shí)際上沒那么簡單，visibility是一個(gè)非常有故事性的屬性
1、visibility具有繼承性，給父元素設(shè)置visibility:hidden;子元素也會(huì)繼承這個(gè)屬性。但是如果重新給子元素設(shè)置visibility: visible,則子元素又會(huì)顯示出來。這個(gè)和display: none有著質(zhì)的區(qū)別
2、visibility: hidden不會(huì)影響計(jì)數(shù)器的計(jì)數(shù)，如圖所示，visibility: hidden雖然讓一個(gè)元素不見了，但是其計(jì)數(shù)器仍在運(yùn)行。這和display: none完全不一樣
<body><div><strong>給元素設(shè)置visibility:hidden樣式</strong><ol><li>元素1</li><li style="visibility:hidden;">元素2</li><li>元素3</li><li>元素4</li></ol></div><div><strong>給元素設(shè)置display:none樣式</strong><ol><li>元素1</li><li style="display:none;">元素2</li><li>元素3</li><li>元素4</li></ol></div></body>
3、CSS3的transition支持visibility屬性，但是并不支持display，由于transition可以延遲執(zhí)行，因此可以配合visibility使用純css實(shí)現(xiàn)hover延時(shí)顯示效果。提高用戶體驗(yàn)。
總結(jié)
以上是生活随笔為你收集整理的display:none和visibility:hidden两者的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vb mysql 实例_vb数据库编程实
- 下一篇： 图解Transformer（完整版）