从隐藏元素谈起

文章目录
  1. 1. 前言
  2. 2. 正文
    1. 2.1. 1. overflow
    2. 2.2. 2.opacity
    3. 2.3. 3.visibility
    4. 2.4. 4.display
    5. 2.5. 5.position
    6. 2.6. 6.clip/clip-path
    7. 2.7. 7.z-index
    8. 2.8. 8. transform
  3. 3. 后记

前言

总括: 本文详细讲述了在网页中用CSS隐藏元素的七种方法。

念念不忘,必有回响;有一口气,点一盏灯。

正文

说起隐藏元素我想每一个前端er都能说起几种,但能说全的我想就不是很多了。博主总结了几种隐藏元素的方法,总结如下:

overflow:hidden
opacity:0;
visibility:hidden
display:none
position:absolute
clip(clip-path):rect()/inset()/polygon()
z-index:-1000
transform:scaleY(0)

我们为什么会需要这么多隐藏元素的方法呢,而且他们看起来实现的都是同样的效果。其实每一种方法实际上都有一些细微的不同,这些不同决定了在一些特定场合下使用哪一种方法。我们下面细细探讨下这些细微之处.

1. overflow

1
2
3
.hide{
overflow:hidden; /* 占据空间,无法点击 */
}

overflow的hidden用来隐藏元素溢出部分,占据空间,无法响应点击事件。

2.opacity

1
2
3
4
5
6
7
.hide{
opacity:0;/* 占据空间,可以点击 */
}
.hide_2{
-webkit-filter:opacity(0);
filter:opacity(0);/* 占据空间,可以点击 */
}

过滤元素filter也可使用opacity值设置透明度,不过filter现在的兼容性不好,只支持webkit内核,这里顺带一提。

opacity是用来设置元素透明度的,但当设置成0的时候也就相当于隐藏元素了。因此,元素依然存在原来的位置,占据空间也可响应事件。如果你打算使用 opacity 属性在读屏软件中隐藏元素,很不幸,你并不能如愿。元素和它所有的内容会被读屏软件阅读,就像网页上的其他元素那样。换句话说,元素的行为就和它们不透明时一致。

3.visibility

1
2
3
.hide{
visibility:hidden; /* 占据空间,无法点击 */
}

如同 opacity 属性,被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏

4.display

1
2
3
.hide{
display:none;/* 不占据空间,无法点击 */
}

经典的display隐藏元素,这个是彻底的隐藏了元素,不占据空间,也就不影响布局,当然也无法响应事件。

5.position

1
2
3
4
5
6
7
8
9
10
.hide{
position:absolute;
left:-99999px;
top:-90999px;/* 不占据空间,无法点击 */
}
.hide-2{
position:relative;
left:-99999px;
top:-90999px;/* 占据空间,无法点击 */
}

假设有一个元素你想要与它交互,但是你又不想让它影响你的网页布局,没有合适的属性可以处理这种情况(opacity 和 visibility 影响布局, display 不影响布局但又无法直接交互——译者注)。在这种情况下,你只能考虑将元素移出可视区域。这个办法既不会影响布局,有能让元素保持可以操作。下采用这种办法未尝不可。

6.clip/clip-path

1
2
3
4
5
6
7
.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

1
2
3
4
.hide{
position:absolute;
z-index:-1000;/* 不占据空间,无法点击 */
}

通过设置z-index值使其它元素遮盖该元素也算是一种隐藏了。

8. transform

1
2
3
.hide{
transform: scale(0,0)/* 占据空间,无法点击 */
}

后记

在这篇教程里,我们看了 7 种不同的通过 CSS 隐藏元素的方法。每一种方法都与其他几种有一点区别。知道你想要实现什么有助于你决定采用哪一个属性,随着时间推移,你就能根据实际需求本能地选择最佳方式了。如果你对于隐藏元素的这些方法还有任何问题,请在评论中留言。

如果您觉得我的文章对您有用,请随意打赏。

您的支持将鼓励我继续创作!

人过留名,雁过留声
听听你的声音

回复 Username 留言: content x

Hosted by Coding Pages