[分享]css3控件隐藏属性

CSS3控件隐藏属性CSS3的出现为控件的隐藏提供了更多的方式和方法，下面我们来介绍一下CSS3中常用的控件隐藏属性。1. display:none使用display:none属性可以将元素完全隐藏，...

CSS3控件隐藏属性

CSS3的出现为控件的隐藏提供了更多的方式和方法，下面我们来介绍一下CSS3中常用的控件隐藏属性。

1. display:none

使用display:none属性可以将元素完全隐藏，即使在HTML源文件中也找不到。
示例代码：
  .hide{
     display:none;
  }

2. visibility:hidden

visibility:hidden可以将元素隐藏，但是在页面中仍然占据原来的位置。
示例代码：
  .hide{
     visibility:hidden;
  }

3. opacity:0

使用opacity:0可以将元素变成透明的，在页面上还是占据原来的位置。
示例代码：
  .hide{
     opacity:0;
  }

4. position:absolute;left:-9999px;

使用position:absolute;left:-9999px;将元素的位置移动到页面外，隐藏元素。
示例代码：
  .hide{
     position:absolute;
     left:-9999px;
  }

5. clip:rect(0 0 0 0)

使用clip:rect(0 0 0 0)可以将元素剪切成没有尺寸的，从而隐藏元素。
示例代码：
  .hide{
     clip:rect(0 0 0 0);
  }

总结：

以上是CSS3中常用的控件隐藏属性，根据实际需求选择对应的属性可以达到更好的效果。