1. 您的位置 首頁 技術

        css隱藏元素的方式有哪些

        方式:1、設置“display:none”語句;2、設置“visibility:hidden”語句;3、設置“opacity:0”語句;4、設置盒模型屬性為0;5、利用“posit…

        方式:1、設置“display:none”語句;2、設置“visibility:hidden”語句;3、設置“opacity:0”語句;4、設置盒模型屬性為0;5、利用“position:absolute;top:-9999px;”語句。

        本教程操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

        css隱藏元素的方式

        display:none

        設置元素的display為none是最常用的隱藏元素的方法。

        .hide {    display:none;}

        將元素設置為display:none后,元素在頁面上將徹底消失,元素本來占有的空間就會被其他元素占有,也就是說它會導致瀏覽器的重排和重繪。

        visibility:hidden

        設置元素的visibility為hidden也是一種常用的隱藏元素的方法,和display:none的區別在于,元素在頁面消失后,其占據的空間依舊會保留著,所以它只會導致瀏覽器重繪而不會重排。

        .hidden{   visibility:hidden}

        visibility:hidden適用于那些元素隱藏后不希望頁面布局會發生變化的場景

        opacity:0

        opacity屬性我相信大家都知道表示元素的透明度,而將元素的透明度設置為0后,在我們用戶眼中,元素也是隱藏的,這算是一種隱藏元素的方法。

        .transparent {     opacity:0;}

        這種方法和visibility:hidden的一個共同點是元素隱藏后依舊占據著空間,但我們都知道,設置透明度為0后,元素只是隱身了,它依舊存在頁面中。

        設置height,width等盒模型屬性為0

        這是我總結的一種比較奇葩的技巧,簡單說就是將元素的margin,border,padding,height和width等影響元素盒模型的屬性設置成0,如果元素內有子元素或內容,還應該設置其overflow:hidden來隱藏其子元素,這算是一種奇技淫巧。

        .hiddenBox {    margin:0;    border:0;    padding:0;    height:0;    width:0;    overflow:hidden;}

        這種方式既不實用,也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是采用這種方式來完成的,比如jquery的slideUp動畫,它就是設置元素的overflow:hidden后,接著通過定時器,不斷地設置元素的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom為0,從而達到slideUp的效果。

        position: absolute,設置元素隱藏

        span{position: absolute;top: -9999px;   left: -9999px;}

        position: absolute,設置元素隱藏的主要原理是通過將元素的 top 和 left 設置成足夠大的負數,使它在屏幕上不可見。

        以上就是css隱藏元素的方式有哪些的詳細內容,更多請關注24課堂在線網其它相關文章!

        本文來自網絡,不代表24小時課堂在線立場,轉載請注明出處:http://www.rw-tm.com/96253.html

        為您推薦

        返回頂部
        欧美人牲交免费观看