CSS实现元素隐藏

1. display:none

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

举个例子：

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

display: none;

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

2. visibility:hidden

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

举个例子：

visibility:hidden

（这里要说一点，给父元素设置了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; - - - 事实上是改变元素的透明度，会占用空间，并且会影响到后代元素，后代元素不能单独显示
• 绝对定位到可视范围之外 - - - 绝对定位的元素脱离了标准文档流，不占位置。