CSS“隐藏隐藏”元素的多种方法的对比元素的多种方法的对比
主要为大家介绍了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