css隐藏元素的方式有哪些

小编给大家分享一下css隐藏元素的方式有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

为余姚等地区用户提供了全套网页设计制作服务，及余姚网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、外贸网站建设、余姚网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

css隐藏元素的几种方法中可以触发点击事件的是

是opacity设置为0的方法。

css隐藏元素的方式：

1、display:none;

.box{
    display: none;
}

最简单也最粗暴的方法就是设置元素的display属性为none。

设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。

2、visibility: hidden

.box{
    visibility: hidden;
}

这种做法虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不会引起重排。

如果希望元素隐藏后不会引起页面布局的变化，则推荐使用visibility:hidden;方式。

3、opacity:0; （filter: alpha(opacity=0); 考虑兼容性两种都要写）

设置元素透明度opacity属性为0，也可以隐藏页面元素。

.box{
    opacity:0;
}

在呈现上与visibility:hidden;方式一样，同样会占据页面空间。

事件绑定差异性：

display:none; 的元素会直接从页面上消失，因此在该元素上绑定的事件不会生效。

visibility: hidden; 的元素不会触发绑定的事件。

opacity:0; 的元素会触发绑定的事件，例如点击会触发click函数。

以上是css隐藏元素的方式有哪些的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网站栏目：css隐藏元素的方式有哪些
当前链接：https://www.cdcxhl.com/article30/jjjgso.html

成都网站建设公司_创新互联，为您提供网站设计公司、品牌网站制作、建站公司、定制开发、App开发、网站改版

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联