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

隱藏元素的方法

隱藏元素的方法能夠總結爲六類：直接隱藏、對溢出內容隱藏、對元素透明度進行調整、將元素移除當前屏幕、對元素的層級關係進行調整、對元素進行裁剪

只有對元素的透明度進行調整才能夠點擊，其他都不可點擊

// 直接隱藏
visibility:hidden
display:none

// 對溢出內容隱藏
overflow:hidden
text-overflow:ellipsis

// 對元素透明度進行調整
opacity:0
background:transparent

// 將元素移除當前屏幕
position:absolute/relative
margin:-1000px
transform:translate(-9999px)
text-indent:-9999px

// 對元素的層級關係進行調整
z-index:-1000

// 對元素進行裁剪
clip(clip-path):rect()/inset()/polygon()

第一類方法：直接隱藏

.hide{
    display:none;/* 不佔據空間，沒法點擊 */
}

.hide{
    visibility:hidden; /* 佔據空間，沒法點擊 */
}

第二類方法：對溢出內容隱藏

.hide{
     overflow:hidden; /* 佔據空間，沒法點擊 */
}

.hide{
     text-overflow:ellipsis; /* 佔據空間，沒法點擊 */
}

第三類方法：對元素透明度進行調整

.hide{
    opacity:0;/* 佔據空間，能夠點擊 */
}

.hide_2{
    -webkit-filter:opacity(0);
    filter:opacity(0);/* 佔據空間，能夠點擊 */
}

.hide_2{
    background:transpant;/* 佔據空間，能夠點擊 */
}

注：過濾元素filter也可以使用opacity值設置透明度，不過filter如今的兼容性很差，只支持webkit內核，這裏順帶一提。

 

第四類方法：將元素移除當前屏幕

.hide{
    position：absolute;
    left:-99999px;
    top:-90999px;/* 不佔據空間，沒法點擊 */
}

.hide-2{
    position：relative;
    left:-99999px;
    top:-90999px;/* 佔據空間，沒法點擊 */
}

div{ 
    margin-left:-9999px; /* 佔據空間，沒法點擊 */
}

.hide{
    transform: translate(0,0)/* 佔據空間，沒法點擊 */
}

.hide{
   div{text-indent:-9999px;}/* 佔據空間，沒法點擊 */
 }

第五類方法：對元素的層級關係進行調整

.hide{
    position:absolute;
    z-index:-1000;/* 不佔據空間，沒法點擊 */
}

第六類方法：對元素進行裁剪

.hide{
    position:absolute;/*fixed*/
    clip:rect(top,right,bottom,left);/* 佔據空間，沒法點擊 */
}

.hide_2 {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

注：在之前，這能夠經過 clip 屬性來實現，可是這個屬性被廢棄了(如今瀏覽器依然支持)，換成一個更好的屬性叫作 clip-path，但惋惜的是依舊只能在chrome40+瀏覽器裏使用。

參考：

CSS 隱藏元素的八種方法

css之10種隱藏元素的方法

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