css如何隱藏元素

這篇文章將為大家詳細講解有關css如何隱藏元素，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

方式：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如何隱藏元素”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。