【CSS】福利！总结css中15种隐藏！

话不多说，直接开始了。
1.width:0;/height:0;
这种方式的缺点是隐藏不了文字,如果需要隐藏文字，那么：

2.针对文字 font-size:0;

3.针对文字 color:transparent;

4.opacity:0;
原理是把元素设置为透明。

5.通过定位，把元素移出屏幕外即可。

<style>
div{
    position:absolute;
    left:-999999px;
}

</style>

6.通过text-indent实现文字隐藏效果

<style>
div {
    text-indent:-999999px;
}
</style>

适用于：给页面添加logo，logo下面覆盖想要被搜索引擎搜索到的文字，即可用这个方法。

7.通过z-index隐藏。

<style>
div{
    z-index:-9999;
}

</style>

8.通过overflow来隐藏部分。

<style>
p{
    width:16ch;
    overflow:hidden;
    white-space:pre;
    text-overflow:ellipsis;
}
</style>
<p>这是一段文字这是一段文字这是一段文字这是一段文字</p>

超出7个汉字后的部分会被隐藏！

9.通过visibality将元素设置为不可见

<style>
div{
    visibality:hidden;
}

</style>

10.通过display将元素彻底隐藏,，且不占位置。

<style>
div{
    display:none;
}

</style>

11.max-width或者max-height设置为0即可

12.通过transform的translate将元素移出屏幕,原理同position的left;

<style>
div{
    transform:translate(-99999px);
}

</style>

13.将元素的缩放scale设置为0即可；

<style>
div{
    transform:scale(0);
}

</style>

14.通过skew让元素重叠(空间想象，旋转),原理类似width:0;

<style>
div{
    transform:skew(90deg);
}

</style>

15.设置margin为负值

<style>
div{
    margin:-99999px;
}

</style>

16.将元素裁剪：

<style>
div{
    -webkit-clip-path:polygon(0px,0px,0px,0px,0px,0px,0px,0px);
}

</style>

挚谢阅读。
欢迎各位看官补充指正！