CSS实现隐藏元素的方法(持续更新)

336 阅读2分钟

CSS实现元素隐藏

1. display:none

直接上代码,给元素设置display:none;以后,元素就会隐藏,并且原有的空间也会被释放掉。意思就是隐藏之后就不占位置了。

举个例子: image.png

元素隐藏1.png

现在有两个盒子 1、2,我们给盒子1设置display:none;

display: none;

盒子1就隐藏了,并且它原有的位置也被释放了,此时盒子2就会跑上来。

元素隐藏2.png

2. visibility:hidden

visibility:hidden; 隐藏元素,但是元素所占用的空间不会被释放,意思就是东西看不见了,但是位置还占着。下面如果有盒子,是上不去的。

举个例子: image.png

visibility:hidden

元素隐藏3.png

(这里要说一点,给父元素设置了visibility:hidden;它里面的子元素可以单独设置显示,意思就是父盒子隐藏了,子元素还是可以显示的)

3. opacity:0

opacity意思是透明,设置了以后元素就会看不见,但是位置还占着。这个属性不止会让当前的元素透明度改变,还会带着当前元素的后代元素一起改变。

如果给一个盒子设置了opacity:0; 那么它和它的后代元素都会一起全透明。并且后代元素不能单独设置显示。

4. 绝对定位到你看不见的地方

这个方法就比较新奇了。

/* 父元素设置相对定位 */


/* 子元素设置绝对定位,然后把top和left值搞大一点 */

position:absolute;
top:-9999999px;
left:-99999999px;

这个时候元素就飞到浏览器视口看不见的地方去了。当你需要元素显示的时候,改变top和left值就好了。

总结对比

本文一共提到了4种让元素隐藏的方法。现在对它们做一个简单的对比。

  • visibility:hidden; - - - 元素隐藏,但会占用空间,子元素可以单独设置显示
  • display:none; - - - 元素隐藏,不会占用空间
  • opacity:0; - - - 事实上是改变元素的透明度,会占用空间,并且会影响到后代元素,后代元素不能单独显示
  • 绝对定位到可视范围之外 - - - 绝对定位的元素脱离了标准文档流,不占位置。