css隱藏元素的六類13種方法

2022-06-07 10:12:10 字數 1105 閱讀 2312

隱藏元素的方法可以總結為六類:直接隱藏、對溢位內容隱藏、對元素透明度進行調整、將元素移除當前螢幕、對元素的層級關係進行調整、對元素進行裁剪

只有對元素的透明度進行調整才可以點選,其餘都不可點選

// 直接隱藏

visibility:hidden

display:none

// 對溢位內容隱藏

overflow:hidden

text-overflow:ellipsis

// 對元素透明度進行調整

opacity:

0background:transparent

// 將元素移除當前螢幕

position:absolute/relative

margin:-1000px

transform:translate(-9999px)

text-indent:-9999px

// 對元素的層級關係進行調整

z-index:-1000

// 對元素進行裁剪

clip(clip-path):rect()/inset()/polygon()

.hide

.hide

.hide

.hide

.hide

.hide_2

.hide_2

注:過濾元素filter也可使用opacity值設定透明度,不過filter現在的相容性不好,只支援webkit核心,這裡順帶一提。

.hide

.hide-2

div.hide

.hide

/* 佔據空間,無法點選 */

}

.hide

.hide

.hide_2

注:在以前,這可以通過 clip 屬性來實現,但是這個屬性被廢棄了(現在瀏覽器依然支援),換成乙個更好的屬性叫做 clip-path,但可惜的是依舊只能在chrome40+瀏覽器裡使用。

css 隱藏元素的八種方法

css之10種隱藏元素的方法

用 css 隱藏頁面元素的 5 種方法

CSS隱藏元素的五種方法

1 opacity 0 2 visibility hidden 3 diaplay none 4 position absolute display display屬性依照詞義真正隱藏元素。將display屬性設為none確保元素不可見並且連盒模型也不生成。使用這個屬性,被隱藏的元素不佔據任何空間。...

CSS隱藏元素的常用的3種方法

將它的值設為hidden將隱藏我們的元素。如同opacity屬性,被隱藏的元素依然會對我們的網頁布局起作用。與opacity唯一不同的是它不會響應任何使用者互動。此外元素在讀屏軟體中會被隱藏。display屬性依照詞義真正隱藏元素。將display屬性設為none確保元素不可見並且連盒模型也不生成。...

CSS隱藏元素的幾種方法

css隱藏元素的幾種方法 1.display none 2.visibility hidden 3.clip path polygon 0px 0px,0px 0px,0px 0px,0px 0px 4.opacity 0 5.position absolute top 9999px left 99...