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 种方法