您现在的位置是：网站首页> 编程资料编程资料

CSS“隐藏”元素的多种方法的对比css 元素显示隐藏的9种思路使用CSS隐藏元素滚动条的示例代码CATIA装配体中的所有参考元素怎么隐藏?CSS隐藏页面元素的5种方法隐藏 Web 中的元素方法及优缺点教程详解

2023-10-23 225人已围观

简介 这篇文章主要为大家介绍了CSS“隐藏”元素的多种方法，并对CSS“隐藏”元素的多种方法进行对比，感兴趣的小伙伴们可以参考一下

一说起CSS隐藏元素，我想大部分小伙伴们都会想到的第一种方法就是设置display为none。这是最为人所熟知也是最常用的方法。我相信还有不少人想到使用设置visibility为hidden来隐藏元素，这种方式也是常用的方法，而且也有很多人知道两者的不同。除了这两种方法，本文还总结了一些比较不常用的方法，比较了这几种“隐藏”元素方法的区别和优缺点，欢迎大家交流！！

几种方法的简单介绍

首先我们分别来说说到底有哪几种隐藏元素的方法，有一些方法是众所周知的，还有一些算是一种技巧。

display:none

设置元素的display为none是最常用的隐藏元素的方法。

CSS Code复制内容到剪贴板
  1. .hide {   
  2.     display:none;   
  3. }  

将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。

visibility:hidden

设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。

CSS Code复制内容到剪贴板
  1. .hidden{   
  2.     visibility:hidden  
  3. }  

visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景

opacity:0

opacity属性我相信大家都知道表示元素的透明度，而将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。

CSS Code复制内容到剪贴板
  1. .transparent {   
  2.    opacity:0;   
  3. }   

这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。

设置height，width等盒模型属性为0
这是我总结的一种比较奇葩的技巧，简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，这算是一种奇技淫巧。

CSS Code复制内容到剪贴板
  1. .hiddenBox {   
  2.     margin:0;   
  3.     border:0;   
  4.     padding:0;   
  5.     height:0;   
  6.     width:0;   
  7.     overflow:hidden;   
  8. }   

这种方式既不实用，也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的，比如jquery的slideUp动画，它就是设置元素的overflow:hidden后，接着通过定时器，不断地设置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom为0，从而达到slideUp的效果。

元素隐藏后的事件响应

如果被隐藏的元素绑定了一些事件，我们执行了相关操作后，这些事件是否会被响应并执行呢，看看下面的代码：

CSS Code复制内容到剪贴板
  1.      
  2.   
  3. "none">
  
  • "hidden">
    •   
  • "opacity0">
    •   
  • "height0">aa
    •      
  •   
  • src="/Scripts/jquery-1.10.2.min.js">   
  •   
  •   

    • 这段代码将四种隐藏元素的方法分别展示出来，然后绑定其点击事件，经过测试，主要有下面的结论：

    1、display:none：元素彻底消失，很显然不会触发其点击事件
    2、visibility:hidden：无法触发其点击事件，有一种说法是display:none是元素看不见摸不着，而visibility:hidden是看不见摸得着，这种说法是不准确的，设置元素的visibility后无法触发点击事件，说明这种方法元素也是消失了，只是依然占据着页面空间。
    3、opacity:0：可以触发点击事件，原因也很简单，设置元素透明度为0后，元素只是相对于人眼不存在而已，对浏览器来说，它还是存在的，所以可以触发点击事件
    4、height:0：将元素的高度设置为0，并且设

    提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：实例讲解如何使用CSS保持页面内容宽高比CSS 实现div宽度根据内容自适应 CSS实现菜单背景自适应宽度的方法CSS基于单张背景图实现自适应宽度的圆角菜单效果代码CSS实现自适应宽度的菜单按钮效果代码CSS中固定宽度布局的详细教程CSS中的line-height行高属性的使用技巧小结CSS中行高line-height属性的一些使用技巧CSS 控制Html页面高度导致抖动问题的原因css属性行高line-height的用法详解不定宽高div内图片垂直居中的css样式

    下一篇：简要讲解CSS中的类型选择器、ID选择器、类选择器该不该使用ID选择器？浅谈对CSS的ID选择器的使用建议英文教程:五种CSS选择器类型IE7对css选择器的改进-CSS教程-网页制作-网页教学网CSS属性选择器的四种格式-CSS教程-网页制作-网页教学网最常用的五类CSS选择器-CSS教程-网页制作-网页教学网四种css 伪类选择器CSS3 选择器 伪类选择器介绍CSS3 选择器 属性选择器介绍CSS3 选择器 基本选择器介绍你不可不知的CSS选择器

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网