css中實現元素隱藏的幾種方法
阿新 • • 發佈:2022-03-30
一、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;