微枫

陈在真の老巢

【杂谈笔记】CSS 隐藏元素的几种方法

方案一:

元素透明度:opacity,通过设置元素透明度,让元素在视觉上透明隐藏,但还是会在页面相应位置,出现,可触发事件;

方案二:

颜色透明度:background/color rgba(x,x,x,0),仅通过调整元素的背景颜色或文字颜色alpha通道,让元素透明隐藏,与方案一同理,元素还是会在页面相应位置,出现,可触发事件;

方案三:

设置宽高:
height: 0;
width: 0;
overflow: hidden;
通过将元素设置为0像素宽高,超出隐藏截断其内子元素,达到隐藏元素的效果,此方案中元素在页面不会产生占位现象,不会触发事件;

方案四:

行内缩进:
text-indent: -9999px;
overflow: hidden;
通过行内首行缩进的方式,将子元素负缩进并超出隐藏,达到隐藏元素效果,多用于保留seo索引文字;

方案五:

点击穿透:pointer-events: none; 单独使用只是规避元素触发事件行为,单元素依旧可见,可搭配方案一、二使用,可以实现隐藏元素并屏蔽事件效果;

方案六:

负边距:
margin-top: -9999px;
margin-left: -9999px;
通过设置元素负边距,让元素在布局中缩进实现隐藏效果,但如果元素为瀑布流布局,则元素后的兄弟元素会随着缩进,对页面其它元素产生影响;

方案七:

位移定位:
变换位移:transform: translate(-9999px,-9999px); 元素原地会出现占位现象
相对定位位移:position: relative; left: -9999px; 元素原地会出现占位现象
绝对定位位移:position: absolute; left: -9999px; 元素原地会出现占位现象
通过位移方式,移动元素脱离可显示区域实现元素隐藏效果

方案八:

可视性:visibility: hidden; 通过设置元素visibility,让元素在视觉上隐藏,但还是会在页面相应位置,出现,可触发事件;

方案九:

展示:display: none; 通过设置元素display,让元素在页面上隐藏,不占位,不可触发事件;

方案十:

蒙版:mask-image; 通过设置蒙版,将元素全蒙扣图,实现元素视觉隐藏效果,元素在页面占位,可触发事件;

2 thoughts on “【杂谈笔记】CSS 隐藏元素的几种方法

发表回复