1. 程式人生 > 其它 >css中實現元素隱藏的幾種方法

css中實現元素隱藏的幾種方法

一、display:none;

display翻譯成中文是顯示、展覽的意思;將display的屬性改為none可以實現元素的隱藏,元素和盒子模型也不生成,被隱藏的元素不佔位置,看不見摸不著,它會導致瀏覽器的重排和重繪。

二、visibility:hidden;

visibility翻譯成中文是能見、可見性的意思;hidden翻譯成中文的是隱藏、不易察覺的意思。將visibility的屬性改成hidden可以實現元素的隱藏,和display:none的區別是它佔位置,看不見但是摸得著,所以它只會導致瀏覽器重繪而不會重排。

三、opacity:0;

opacity翻譯成中文是透明度、不透明的意思;將opacity的屬性改成0那就是透明度等於0看不見元素,但是這種方法也是隻能隱藏看不見元素,和visibility:hidden一樣,元素依然存在頁面中。

四、position

利用定位將元素的top和left值設為足夠大的負數,使它移出螢幕在螢幕上看不見。

五、overflow:hidden

overflow翻譯成中文是漫出、溢位的意思;將overflow的屬性設定hidden可以實現元素隱藏,但是這個是超出盒子的部分隱藏,有侷限性。

總:常用的方法就是display:none 和visibility:hidden;