本篇文章給大家分享的是有關怎么在css中顯示與隱藏元素,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
站在用戶的角度思考問題,與客戶深入溝通,找到來鳳網(wǎng)站設計與來鳳網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設計與互聯(lián)網(wǎng)技術結合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:網(wǎng)站制作、網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名與空間、雅安服務器托管、企業(yè)郵箱。業(yè)務覆蓋來鳳地區(qū)。
display
對于元素顯隱來說,最常見就是display:none | display:block,但是使用這種方法有個問題,元素的display屬性在隱藏前并不都是block,還有可能是inline、inline-block等
注意:如果要適用于任何元素需要提前儲存元素的display值
測試文字
visibility
visibility:hidden與display:none作為隱藏元素的兩種方式,常常被人們拿來比較。其實區(qū)別很簡單,前者不脫離文檔流,保留隱藏之前元素占據(jù)的物理區(qū)域;而后者則脫離文檔流,如果重新顯示則需要頁面的重新繪制。還有一點區(qū)別卻很少人提到,如果父級設置display:none;子級設置display:block也不會顯示;而如果父級設置visibility:hidden;子級設置visibility:visible時子級會顯示出來
注意:visilibity可應用transition屬性。因為visibility是離散步驟,在0到1數(shù)字范圍之內,0表示隱藏,1表示顯示。visibility:hidden可以看成visibility:0;visibility:visible可以看成visibility:1。于是,visibility應用transition等同于0~1之間的過渡效果。實際上,只要visibility的值大于0就是顯示的。由于這個現(xiàn)象,我們可以利用transition實現(xiàn)元素的延時顯示隱藏
測試文字
hidden
可能有些人不太熟悉,HTML有個hidden全局屬性,專門用于顯示隱藏元素,與display:none的作用類似,元素隱藏時脫離文檔流,無法接受javascript事件
注意:IE10-不支持test.hidden='hidden'寫法,只支持test.setAttribute('hidden','hidden')寫法
測試文字
opacity
對于元素顯隱,opacity的使用頻率也挺多。opacity的好處是,即使opacity為0的元素,仍然可以接受javascript事件,這是display:none和visiblity:hidden所不具備的。
測試文字
overflow
CSS中有一個屬性是overflow,overflow:hidden代表著溢出隱藏。我們可以利用父級的overflow:hidden配合父級的height:0或width:0來實現(xiàn)元素的顯隱
注意:當設置overflow的元素在絕對定位元素和其包含塊之間的時候,overflow屬性會失效
測試內容
clip
CSS裁剪clip這個屬性平時用的不多,當clip:rect(top,right,bottom,left)中的top>=bottom,或者left>=right時,可實現(xiàn)元素的隱藏效果,效果類似于visibility:hidden
注意:clip屬性只能應用在絕對定位元素上
測試內容
transform
CSS變形transform是一些效果的集合,主要是移動、旋轉、縮放和傾斜這四種基本操作,還可以通過設置matrix矩陣來實現(xiàn)更復雜的效果。通過不同的變形函數(shù)可以實現(xiàn)元素顯隱效果
注意:IE9-瀏覽器不支持,safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前綴
【1】scale
transform:scale(0)時,元素被隱藏
測試內容
【2】rotate
transform:rotateX(90deg)時,元素被隱藏
測試內容
【3】skew
transform:skew(90deg)時,元素被隱藏
測試內容
覆蓋
利用定位元素可以覆蓋普通流元素的特性。為元素的before偽元素設置相同的尺寸,通過控制偽元素的定位屬性,實現(xiàn)顯隱效果
測試內容//鼠標移入移出會出現(xiàn)元素的顯隱效果
偏移
元素顯示隱藏的另一種常見思路是偏移,將元素移動到視窗范圍外,也可以實現(xiàn)等價的顯隱效果
【1】margin-top
利用負margin將元素移出視窗外,要注意的是設置負margin的元素并沒有脫離普通流,后續(xù)元素會跟著一起移動
測試內容
【2】left
通過設置相對定位或絕對定位元素的偏移屬性,將元素移動到視窗外
測試內容
【3】translate
測試內容
以上就是怎么在css中顯示與隱藏元素,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。