css隐藏元素的几种方法

在CSS中，要隐藏DOM元素常见的几种方法：

1.opacity值为0

2.visibility值为hidden

3.display值为none

4.position值为absolute，并且将其移到不可见区域

5.（在新的CSS中使用clip-path来替代clip，不常用知道就行了）

该属性很少见，该属性是通过裁剪的方法实现隐藏的。被隐藏的内容依然占据着那个位置，它周围的元素的行为就如同它可见时一样。

记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。此外，这个属性能够使用各种过渡动画来实现不同的效果。

注意：clip-path之所以没有很普及，是因为其浏览器兼容问题。在IE中是完全不支持的，所以，建议用的时候一定要加上内核前缀。

除此之外，还可以使用（不常用）：

6.设置元素的hidden

上面隐藏元素的方法都是大家常见的，也是众所周之的。

当然除此之外还有一些特殊的小技巧,比如说：

7.将元素的font-size、line-height、width和height设置为0

8.设置元素的transform的translateX或者translateY的值为-100%

常用的三种隐藏元素方法不用点：

占不占文档位置的不同：

display:none隐藏后不占据额外空间，它会产生回流和重绘。

visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。

是否子元素继承：

   display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~

　visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来

　opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

事件绑定的不同：

 

display:none            的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；

 

visibility:hidden       元素上绑定的事件也无法触发；

 

opacity: 0                 元素上面绑定的事件是可以触发的。

过渡动画的不同：

 

transition对于display肯定是无效的

 

transition对于visibility也是无效的

 

transition对于opacity是有效

 

 

 

 

 

转载于:https://www.cnblogs.com/hujun-2018/p/10606186.html