tips:
- visibility: hidden; 这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在
- opacity: 0; CSS3属性,设置0可以使一个元素完全透明
- position: absolute; 设置一个很大的 left 负值定位,使元素定位在可见区域之外
- display: none; 元素会变得不可见,并且不会再占用文档的空间。
- transform: scale(0); 将一个元素设置为缩放无限小,元素将不可见,元素原来所在的位置将被保留
<div hidden="hidden">
HTML5属性,效果和display:none;相同,但这个属性用于记录一个元素的状态- height: 0; 将元素高度设为 0 ,并消除边框
- filter: blur(0); CSS3属性,将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中
- margin为0
- div 盖住
1. overflow
-
.hide{
-
overflow:hidden; /* 占据空间,无法点击 */
-
}
overflow的hidden用来隐藏元素溢出部分,占据空间,无法响应点击事件。
2.opacity
-
.hide{
-
opacity:0;/* 占据空间,可以点击 */
-
}
-
.hide_2{
-
-webkit-filter:opacity(0);
-
filter:opacity(0);/* 占据空间,可以点击 */
-
}
过滤元素filter也可使用opacity值设置透明度,不过filter现在的兼容性不好,只支持webkit内核,这里顺带一提。
opacity是用来设置元素透明度的,但当设置成0的时候也就相当于隐藏元素了。因此,元素依然存在原来的位置,占据空间也可响应事件。如果你打算使用 opacity 属性在读屏软件中隐藏元素,很不幸,你并不能如愿。元素和它所有的内容会被读屏软件阅读,就像网页上的其他元素那样。换句话说,元素的行为就和它们不透明时一致。
3.visibility
-
.hide{
-
visibility:hidden; /* 占据空间,无法点击 */
-
}
如同 opacity 属性,被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏
4.display
-
.hide{
-
display:none;/* 不占据空间,无法点击 */
-
}
经典的display隐藏元素,这个是彻底的隐藏了元素,不占据空间,也就不影响布局,当然也无法响应事件。
5.position
-
.hide{
-
position:absolute;
-
left:-99999px;
-
top:-90999px;/* 不占据空间,无法点击 */
-
}
-
.hide-2{
-
position:relative;
-
left:-99999px;
-
top:-90999px;/* 占据空间,无法点击 */
-
}
假设有一个元素你想要与它交互,但是你又不想让它影响你的网页布局,没有合适的属性可以处理这种情况(opacity 和 visibility 影响布局, display 不影响布局但又无法直接交互——译者注)。在这种情况下,你只能考虑将元素移出可视区域。这个办法既不会影响布局,有能让元素保持可以操作。下采用这种办法未尝不可。
6.clip/clip-path
-
.hide{
-
position:absolute;/*fixed*/
-
clip:rect(top,right,bottom,left);/* 占据空间,无法点击 */
-
}
-
.hide_2 {
-
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
-
}
隐藏元素的另一种方法是通过剪裁它们来实现。在以前,这可以通过 clip 属性来实现,但是这个属性被废弃了(现在浏览器依然支持),换成一个更好的属性叫做 clip-path。clip-path属性实在是用处大大滴有,可以很容易的实现一些复杂的图形大漠老师分享的一个链接,该链接里的图形大多都是用clip-path的polygon值来实现的。但可惜的是依旧只能在chrome40+浏览器里使用.
7.z-index
-
.hide{
-
position:absolute;
-
z-index:-1000;/* 不占据空间,无法点击 */
-
}
通过设置z-index值使其它元素遮盖该元素也算是一种隐藏了。
8. transform
-
.hide{
-
transform: scale(0,0)/* 占据空间,无法点击 */
- }