[分享]css3所有隐藏样式

CSS3提供了多种实现隐藏元素的样式，本文将一一介绍。/ display:none / display: none; 使用display:none可以将元素完全隐藏，不占据任何空间。其效果与删除该元素...

CSS3提供了多种实现隐藏元素的样式，本文将一一介绍。

/* display:none */
display: none; 

使用display:none可以将元素完全隐藏，不占据任何空间。其效果与删除该元素具有相同的效果，但是可以通过JavaScript等脚本再次显示该元素。

/* visibility:hidden */
visibility: hidden; 

使用visibility:hidden可以使元素不可见，但仍占据页面空间。可以通过JavaScript等脚本修改其显示状态。

/* opacity:0 */
opacity: 0; 

使用opacity:0可以使元素完全透明，但仍占据页面空间。可以通过JavaScript等脚本修改其显示状态。

/* height:0;width:0 */
height: 0;
width: 0;
overflow: hidden; 

使用height:0;width:0可以让元素的高度和宽度均为0，不占据页面空间。overflow:hidden可以使元素不显示其内容。

/* position:absolute;left:-9999px */
position: absolute;
left: -9999px; 

使用position:absolute;left:-9999px可以将元素定位到页面外部，不占据页面空间。可以通过JavaScript等脚本修改其位置使其重新显示。

/* clip-path:polygon(0 0,0 0,0 0,0 0);
   clip:rect(0,0,0,0); */
clip-path: polygon(0 0,0 0,0 0,0 0);
clip: rect(0,0,0,0); 

使用clip-path和clip可以将元素的显示区域限制为一个矩形或多边形，超出部分被隐藏。但是IE浏览器不支持clip-path。