在Web開發中,有時候我們需要將某個元素隱藏起來,比如當我們需要在一個頁面中添加彈出層時,需要先將這個彈出層隱藏起來,等到用戶點擊了某個按鈕再顯示。又如在網站頂部的導航欄中,我們很可能在某個頁面上不需要顯示某個導航鏈接。這個時候,我們就可以使用CSS來實現元素的隱藏。
在CSS中,有很多可以隱藏元素的方法,比較常見的有以下幾種:
/* 隱藏元素的方法一:display:none */ .hidden{ display:none; } /* 隱藏元素的方法二:visibility:hidden */ .hidden{ visibility:hidden; } /* 隱藏元素的方法三:opacity:0 */ .hidden{ opacity:0; }
不同方法的區別:
/* display:none */ 當使用display:none時,元素的位置、大小等信息都不會保留,也就是說,該元素在頁面中不僅不可見,而且是完全不存在的。 /* visibility:hidden */ 當使用visibility:hidden時,元素的位置、大小等信息都會保留,只是元素不可見了。在占據著原本位置的同時等待改變元素的可見屬性再次顯示出來。 /* opacity:0 */ 當使用opacity:0時,元素的位置、大小等信息都會保留,只是元素變成了全透明,依然占據著原本位置。
根據w3c標準,以上三種方法都可以用來隱藏元素。在選擇使用哪種方法時,需要根據具體情況來決定。
本文介紹了CSS隱藏元素的一些基礎知識,希望對大家有所幫助。
上一篇css隱藏元素使用語句
下一篇css設置無限旋轉動畫