CSS 隐藏页面上的一个元素有哪几种方法?

本文介绍了多种使用CSS来隐藏页面元素的方法,包括display:none、visibility:hidden等,并探讨了它们之间的区别及适用场景。

display:nonevisibility:hidenopacity:0 这三种;

  1. 设置 fixed 并设置足够大负距离的 left top 使其“隐藏”;
  2. 用层叠关系 z-index 把元素叠在最底下使其“隐藏”;
  3. 用 text-indent:-9999px 使其文字隐藏。

还有
PositionClip-path

Position

将元素的 topleft 设置成足够大的负数,使它在屏幕上不可见。

.hide{
position:absolute;
top:-9999px;
left:-9999px;
}
Clip-path

隐藏元素的另一种方法是通过剪裁它们来实现。
剪裁区大小为零,这意味着用户将不能与隐藏的元素直接交互。

.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

opacity:0、visibility:hidden、display:none优劣和适用场景可以看看:https://blog.csdn.net/Menqq/article/details/114873577

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值