【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>

摯謝閱讀。
歡迎各位看官補充指正！