隱藏元素的方法,都有啥區別?

2022-08-27 21:54:13 字數 1476 閱讀 5187

用 css 隱藏頁面元素有許多種方法。你可以將 opacity 設為 0、將 visibility 設為 hidden、將 display 設為 none 或者將 position 設為 absolute 然後將位置設到不可見區域。

該屬性的意思是檢索或設定物件的不透明度當他的透明度為0的時候,視覺上它是消失了,但是他依然佔據著那個位置,並對網頁的布局起作用。它也將響應使用者互動。新增了該屬性的元素,它的背景和元素內容也是會跟著變化的.

注意:該屬性是相容ie9以上的瀏覽器,ie8 以及更早的版本支援替代的 filter 屬性,例如: filter:alpha(opacity=50)。

該屬性才是真正意義上的隱藏元素,當元素的display屬性為none時,該元素就會就會從視覺中消失,並且連盒模型也不生成.也不會在頁面佔據任何位置,不但如此,就連它的子元素也會一同從盒子模型中消失。給他和它的子元素新增的任何動畫效果互動效果都會不起作用。jq中的show(),hide(),toggle()方法就是通過改變display的值來實現變化效果的。

該屬性類似opacity屬性,該屬性值為hidden的時候,元素將會隱藏,也會佔據著自己的位置,並對網頁的布局起作用,與 opacity 唯一不同的是它不會響應任何使用者互動。此外,元素在讀屏軟體中也會被隱藏。這個屬性也能夠實現動畫效果,只要它的初始和結束狀態不一樣。這確保了 visibility 狀態切換之間的過渡動畫可以是時間平滑的

注意:1.任何的版本的 internet explorer (包括 ie8)都不支援 "inherit" 和 "collapse" 屬性值。

2.如果乙個元素的 visibility 被設定為 hidden,但是想要顯示它的子元素,只要給想要顯示的子元素新增visibility:visible;就可以了。嘗試 hover 在隱藏元素上,不要 hover 在 p 標籤裡的數字上,你會發現你的滑鼠游標沒有變成手指頭的樣子。此時,你點選滑鼠,你的 click 事件也不會被觸發。而在 標籤裡面的 標籤則依然可以捕獲所有的滑鼠事件。一旦你的滑鼠移動到文字上,本身變得可見並且事件註冊也隨之生效。

該屬性很少見,該屬性是通過裁剪的方法實現隱藏的。被隱藏的內容依然佔據著那個位置,它周圍的元素的行為就如同它可見時一樣。記住使用者互動例如滑鼠懸停或者點選在剪裁區域之外也不可能生效。此外,這個屬性能夠使用各種過渡動畫來實現不同的效果。

注意:clip-path之所以沒有很普及,是因為其瀏覽器相容問題。在ie中是完全不支援的,所以,建議用的時候一定要加上核心字首。

該屬性的意義就是把元素脫離文件流移出視覺區域,新增該屬性後既不會影響布局,又能讓元素保持可以操作。應用該屬性後,主要就是通過控制方向(top,left,right,bottom),達到一定的值,離開當前可是頁面。

css**:

注意:你得避免使用這個方法去隱藏任何可以獲得焦點的元素,因為如果那麼做,當使用者讓那個元素獲得焦點時,會導致乙個不可預料的焦點切換。這個方法在建立自定義核取方塊和單選按鈕時經常被使用。

這裡介紹了5中方法,每種方法之間都是存在區別的,到底要用哪一種的話,就要視情況而定

CSS隱藏元素的方法及區別

1.opacity opacity 0將元素本身及其子元素都置為不可見的,而元素本身依然佔據它自己的位置並對網頁的布局起作用,它會響應使用者互動。2.visibility visibility hidden將元素本身及其子元素都置為不可見的,而元素本身依然佔據它自己的位置並對網頁的布局起作用,它不會...

隱藏元素的方法

a.visibility hidden 這個屬性只是簡單的隱藏某個元素,但是元素占用的空間任然存在 b.opacity 0 乙個css3屬性,設定0可以使乙個元素完全透明,製作出和visibility一樣的效果。與visibility相比,它可以被transition和animate c.posit...

隱藏元素的方法

visibility hidden 這個屬性只是簡單的隱藏某個元素,但是元素占用的空間任然存在 opacity 0 乙個css3屬性,設定0可以使乙個元素完全透明,製作出和 visibility一樣的效果。與visibility相比,它可以被transition和animate position a...