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影片教學》

以上是css隱藏元素的方式有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！