CSS隐藏元素的N种实现方式。

CSS隐藏元素的N种实现方式。

width:0;

• 光有高度是不行的，还得有宽度。缺点文字隐藏不了，可以加个color:#fff和背景颜色一样就ok了，障眼法，迷惑人的，其实内容还在，如果有文字的话，还是可以触发点击事件的，这种做法很多黑客就会利用在目标站点链接上加一个和背景颜色一样的让管理员发现不了。

height:0;

• 和上面一样,一个物体至少得有宽和高。

opacity:0;

• 元素还在，只是看不见而已。(还占据位置)

position:absolute;left:-9999px;

• 元素还在，只是超出了屏幕范围。

text-indent:-9999;

• 只能达到隐藏文字的效果，没有其他副作用。给页面添加logo图片，还想seo添加文字又不想显示这段文字，就可以使用这个方法。

z-index:-99999;

• 需要配合定位使用，层级太低导致我们无法看见这个元素，使用这个缺点还是很多的，首先就算你z-index:-9999了并且定位，但如果这个元素比后面的元素高了或者宽了，再着有文字一样还是可以看到这个元素。

visibility:hidden;

• 元素被隐藏，但是还占位置。

display:none;

• 元素被隐藏，并且不占位置。

background-color:#fff;

• 把元素的背景颜色设置成body的背景，障眼法。

max-width:0px;

• 和width:0px;原理一样。

max-height:0px;

• 和height:0;原理一样。

background-color:rgba(0,0,0,0);color:#fff;

• 把元素透明度设置成0，达到看不见的效果，和opacity原理一样。如果想让文字也看不见，给它一个障眼法就好了,或者font-size:0

font-size:0px;

• 隐藏文字的效果。

####transform:translate(-9999px);

• 和left:-99999px;原理一样，把元素移出屏幕可视区。

transform:scale(0);

• 让元素的大小设置成0不就看不见了哈。

transform:skew(90deg);

• 让元素重和，看不见了。

margin-left:-9999px;

• 把元素移出屏幕可视区

-webkit-clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);

• 把元素剪裁了

转载于:https://juejin.im/post/5cebd2c9f265da1b695d3c73