使用css隐藏元素的方式有哪些,css元素隐藏和显示

前言

　　在常见的样式排版中，我们经常会遇到隐藏某个模块的场景。

　　通过css隐藏元素的方法有很多种，看起来也能达到同样的效果。

　　但实际上每种方法都略有不同，这些不同决定了在一些特定的情况下使用哪种方法。

实现方式

　　通过css隐藏元素的方法如下：

　　显示：无可见性：隐藏不透明度：0将高度和宽度模型属性设置为0位置：绝对剪辑路径

display:none

　　将元素的显示设置为无是隐藏元素最常用的方法。隐藏{ display:none；}将元素设置为display:none后，元素会在页面上完全消失。

　　一个元素本身占用的空间会被其他元素占用，也就是说会导致浏览器重排和重绘。

　　它消失后，自身绑定的事件不会被触发，也不会有过渡效果。

　　特点：元素不可见，不占空间，不能响应点击事件。

visibility:hidden

　　将元素的可见性设置为隐藏也是隐藏元素的常用方法。

　　只有在页面中隐藏元素，DOM结果才会存在，只是当时处于不可见状态，不会触发重排，但会触发重绘。隐藏{ visibility:hidden}具有隐藏的效果，所以他自己的事件不会被触发。

　　特点：元素不可见，占用页面空间，不能响应点击事件。

opacity:0

　　 opacity属性指示元素的透明度。在元素的透明度设置为0后，元素在我们用户的眼中是隐藏的。

　　不会引起重排，通常会引起重绘。

　　如果使用animation动画对不透明度进行更改(默认情况下动画会触发GPU加速)，只会触发GPU级别的复合，不会触发重绘。透明{不透明度：0；}因为它仍然存在于页面上，他自己的事件仍然可以被触发，但是被他屏蔽的元素不能触发他的事件。

　　需要注意的是，它的子元素不能设置不透明度来达到显示效果。

　　特点：改变元素的透明度，元素不可见，占用页面空间，可以响应点击事件。

设置height、width属性为0

　　将影响元素框模型的元素的边距、边框、填充、高度、宽度等属性设置为0。如果元素中有子元素或内容，还应该设置它的overflow:hidden来隐藏它的子元素。hidden box { margin:0；边框：0；填充：0；高度：0；宽度：0；溢出：隐藏；}特点：元素不可见，不占用页面空间，不能响应点击事件。

position:absolute

　　将元素移出可见区域。隐藏{ position:absolute；top:-9999 px；左：-9999 px；}特点：元素不可见，不影响页面布局。

clip-path

　　以剪辑的形式。隐藏{ clip-path: polygon(0px 0px，0px 0px，0px 0px，0px 0px)；}特点：元素不可见，占用页面空间，不能响应点击事件。

小结

　　最常用的方法是“显示：无”和“可见性：隐藏”。其他方法只能算绝招。它们的真正目的不是隐藏元素，所以不推荐使用。

区别

　　下表显示了显示：无、可见性：隐藏和不透明度：0之间的区别：

　　显示：无可见性：隐藏不透明度：0在页面中不存在。会有重排吗？会重画吗？会不会不一定约束自己？事件不会触发。不支持可触发转换。子元素可以恢复。可以被阻止的元素可以触发事件。我不能停在这里。这篇关于如何在css中隐藏页面元素及其区别的文章在这里。有关css中隐藏页面元素的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。