本文介绍: 在平常的样式排版中，我们经常遇到将某个模块隐藏的场景，通过css隐藏的元素方法有很多种，它们看起来实现的效果是一致的，但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法。最常用的还是方法一和方法二，其他的方式只能算是一种小妙招吧，很偏，因为它们的真正用途并不是用于隐藏元素所以本人是不推荐使用它们的。
前言、
在平常的样式排版中，我们经常遇到将某个模块隐藏的场景，通过css隐藏的元素方法有很多种，它们看起来实现的效果是一致的，但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法。
实现方法综合、
通过css实现隐藏元素方法有如下：
方法一：display：none
display：none是通常最实用的隐藏元素的方法
将元素设置的display：none，可以将元素在页面中彻底消失。
此元素原本所占据的位置，会被其他元素占据，也就是说它会导致浏览器的重排的重绘
消失后，自身绑定的事件不会触发，也不会有过渡效果
特点：元素不可见，不占据空间，无法响应点击事件
方法二：visibility：hidden
visibility：hidden也是非常常用的一种隐藏方式，但是跟display：none大有不同
visibility：hidden从页面上来看仅仅是隐藏该元素，DOM结果依然会存在，只是处于一个不可见的状态。不会发生重排，但是会发生重绘。
给人的效果是隐藏了，所以他的自身事件不会触发。
特点：元素不可见，占据空间，无法响应点击事件
方法三: opacity：0
方法四：设置height、width模型属性为0
方法五：position：absolute
方法六：clip-path
总结：
区别：
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
