css隱藏元素的方式有哪些

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

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css隱藏元素的方式

display:none

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

.hide {     display:none; }

將元素設(shè)置為display:none后，元素在頁(yè)面上將徹底消失，元素本來占有的空間就會(huì)被其他元素占有，也就是說它會(huì)導(dǎo)致瀏覽器的重排和重繪。

visibility:hidden

設(shè)置元素的visibility為hidden也是一種常用的隱藏元素的方法，和display:none的區(qū)別在于，元素在頁(yè)面消失后，其占據(jù)的空間依舊會(huì)保留著，所以它只會(huì)導(dǎo)致瀏覽器重繪而不會(huì)重排。

.hidden{    visibility:hidden }

visibility:hidden適用于那些元素隱藏后不希望頁(yè)面布局會(huì)發(fā)生變化的場(chǎng)景

opacity:0

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

.transparent {      opacity:0; }

這種方法和visibility:hidden的一個(gè)共同點(diǎn)是元素隱藏后依舊占據(jù)著空間，但我們都知道，設(shè)置透明度為0后，元素只是隱身了，它依舊存在頁(yè)面中。

設(shè)置height，width等盒模型屬性為0

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

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

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

position: absolute，設(shè)置元素隱藏

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

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