话不多说,直接开始了。
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>
挚谢阅读。
欢迎各位看官补充指正!