css之10种隐藏元素的方法

1、通过设置width:0;或height:0;

div{width:0;}或div{height:0;}
但是这种方法隐藏不了文字。如果还想把文字隐藏可以,

div{font-size:0;}

2、将元素的opacity设置为0。元素本身还在,只是透明了,所以该元素所占的位置将不会改变。

div{opacity:0;}

3、用定位或者margin将元素移除屏幕范围。

div{
position:absolute;
left:-9999px;
}或
div{
margin-left:-9999px;
}

4、通过text-indent实现隐藏文字的效果。这种效果类似将元素移除屏幕范围

div{text-indent:-9999px;}

5、通过z-index隐藏一个元素

<style type="text/css">
p {
    background-color:#fff;
    position:absolute;
    left:0;
    top:0;
    }
.one{z-index:-1;}
.t{z-index:1;}
</style>
<body>
<p class="one">这是</p>
<p class="t">擦擦</p>
</body>

实现这种效果的前提是需要有个背景颜色(白色也行),就是不能为透明,否则两个文本将会重叠。

6、通过visibility将元素设置为不可见,但是在页面还是会占据位置,和opacity效果类似。

div{visibility:hidden;}

7、通过display将元素彻底隐藏,并且不会占位置

div{display:none;}

8、将背景设为透明,字体大小设置为0。虽看不到,但是仍占位置

div{
    font-sizee:0;
    background-color:transparent;
}

9、通过transform的translate函数隐藏一个元素,

div{transform:translate(-9999px);}
这个原理就是讲元素移除屏幕。

10、如果元素超出所设置宽、高,溢出的部分可以用overflow来隐藏。

div{overflow:hidden;}
同样的文本也有溢出隐藏的属性。

div{text-overflow:ellipsis;} //当字符超过7个,7个之后的文字将会被隐藏。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值