新聞中心
你知道CSS display:none和visibility:hidden的區(qū)別嗎,這里和大家分享一下,使用CSS display:none屬性后,HTML元素(對象)的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性后,HTML元素(對象)僅僅是在視覺上看不見(完全透明),而它所占據(jù)的空間位置仍然存在。

創(chuàng)新互聯(lián)建站長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù),團隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為永春企業(yè)提供專業(yè)的網(wǎng)站設(shè)計制作、成都網(wǎng)站制作,永春網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
CSS display:none和visibility:hidden的區(qū)別
visibility:hidden隱藏,但在瀏覽時保留位置;CSS display:none視為不存在,且不加載!
Overflow屬性值{visible|hidden|scroll|auto}前提是先要限制DIV的寬度(width)和高度(height)。二者都是隱藏HTML元素,在視覺效果上沒有區(qū)別,但在一些DOM操作中二者還是有所不同的。
CSS display:none;
使用該屬性后,HTML元素(對象)的寬度、高度等各種屬性值都將“丟失”;
visibility:hidden;
使用該屬性后,HTML元素(對象)僅僅是在視覺上看不見(完全透明),而它所占據(jù)的空間位置仍然存在,也即是說它仍具有高度、寬度等屬性值。
具體區(qū)別請看演示代碼吧:
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
實例演示:CSS display:none和visible:hidden的區(qū)別
- +GetXYWH($('CnLei_1')).W);">點擊這里CSS display:none;
- +GetXYWH($('CnLei_2')).W);">點擊這里visibility:hidden;
CnLei_1
【編輯推薦】
- 使用CSS display:none時注意事項
- CSS display:inline和float:left兩者區(qū)別
- 深入探究DIV CSS布局中position屬性用法
- CSS屬性display:inline-block使用揭秘
- CSS display:block顯示布局錯亂解決方案
分享文章:CSSdisplay:none和visibility:hidden區(qū)別
瀏覽路徑:http://www.dlmjj.cn/article/cdddhdi.html


咨詢
建站咨詢
