【杂谈笔记】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; 通过设置蒙版，将元素全蒙扣图，实现元素视觉隐藏效果，元素在页面占位，可触发事件；