如何隐藏页面中的某个元素？(越多方式越好) #19

YvetteLau · 2019-06-04T00:31:37Z

No description provided.

evliskin · 2019-06-04T00:45:34Z

1.display:none
2.visibility:hidden
3.父级宽高为0
4.position:absolute top left属性设置很大脱离页面
5.元素z-index设负值其他元素给个正值
暂时想到这么多不知道对不对

yangjianwei1223 · 2019-06-04T00:55:54Z

将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域。

darlingyz · 2019-06-04T00:57:11Z

1、display:none;
2、 visibily:hidden;
3、overflow:hidden;
4、 z-index:-1//别的层级关系
5、 positin:absolute;//定位相关的
left：-999999999;
6、 opacity:0;
7、各种框架的条件渲染也可以实现元素的隐藏等
------想到了这么多，期待大佬们的方法

shenanheng · 2019-06-04T01:13:42Z

1:display:none;
2: visibily:hidden;
3:利用定位,移动到很远很远的距离
4:利用定位,z-index
5:opacity:0;
6:将这个元素的所有都变成透明色
7:利用js来进行隐藏、删除
8:设置一个元素的宽高都为0;
9:利用absoulute让元素缩成一团

daibin0809 · 2019-06-04T01:19:19Z

display: none;
visibility: hidden;
opacity: 0;
z-index;
position: absolute;
height: 0;overflow: hidden;
transform: scale(0);
...不知道了=

kaiking01 · 2019-06-04T01:33:27Z

display:none;
position:absolute; top:-100000px; left:-100000px
position:fixed; top:-100000px;left:-100000px;
position:relative; z-index:2; (前提是，设置一个兄弟级元素，除了z-index大于它之前，其他css都一样的)
width:0;height:0; overflow: hidden;
opacity:0;
margin-left:-100000px; (父容器设置overflow:hidden;)
padding-left:-100000px; (父容器设置overflow:hidden;)
transform:translateY(-10000px); （或者translateX(-10000px);）
transform:scale(0);
transform: rotateX(90deg); （或者 rotateY(90deg);）
transform: skewX(90deg); （或者 skewY(90deg);）

killbymywind · 2019-06-04T01:35:16Z

1：opacity设置 0。
2：将 visibility 设置为 hidden。
3:position absolute 然后设置位置设到不可见区域
4:display： none 。
5：不设置高度。

woyiweita · 2019-06-04T02:02:27Z

元素隐藏

常用两种方法

display:none; (不占位隐藏)
visibility:hidden; (占位隐藏)

将透明度设置为0

opacity:0; (需要考虑兼容性,filter:Alpha(opacity=0))(占位)

定位

    <!--HTML结构-->
    <div class="box">
        <div class="self">qwwww</div>
    </div>

position:absolute;left:-999%;(移出可视区域，为何不使用正值自行尝试，不占位)
position:fixed;left:-999%;(移出可视区域，为何不使用正值自行尝试，不占位)
position:relative;left:-999%;(移出可视区域，为何不使用正值自行尝试，占位)
.box{background-color:#fff;}.self{position:absolute;z-index:-9;}(移至底层，使用背景遮罩，不占位)
.box{background-color:#fff;}.self{position:fixed;z-index:-9;}(移至底层，使用背景遮罩，不占位)
.box{background-color:#fff;}.self{position:relative;z-index:-9;}(移至底层，使用背景遮罩，占位)

Transform

transform: translate(-999%, -999%);(移出可视区域，为何不使用正值自行尝试，占位)
transform: scale(0);(缩放，占位)

盒模型

margin-left:-999%;(移出可视区域，为何不使用正值自行尝试，占位，慎用)
width:0;height:0;overflow:hidden;(盒子大小为0，超出隐藏，不占位)

常用文本隐藏

text-indent:-9999px;(移出可视区域，为何不使用正值自行尝试)

into-piece · 2019-06-04T02:05:11Z

display: none;
visibility: hidden;
opacity: 0;
position: absolute; left/right/top/bottom: -max;/ z-index:-1;
height: 0;
移动元素到页面看不见区域: margin/padding/translate:max;
transform: scale(0);
一般react是控制一个状态变量isShow: {isShow&&element};

xdandsl · 2019-06-04T02:14:52Z

1,display为none
2,overflow为hidden
3,opacity为0(视觉上看不见元素，实际还存在)
4,将visibility设为hidden（占位隐藏）
5,transform: scale(0) （占位隐藏）
6,父元素height为0，再溢出隐藏overflow:hidden

AILINGANGEL · 2019-06-04T02:32:22Z

display: none
visibility:hidden
opacity: 0
color: transparent
块元素： height: 0; width: 0; overflow: hidden
font-size: 0;

Liruimin2 · 2019-06-04T03:05:45Z

display:none;
visibility:hidden;
z-index:-1000;
width:0;
height:0;
opacity:0;

MissNanLan · 2019-06-04T04:06:27Z

display：none
visibility： hidden( 占位隐藏)
opacity: 0 (占位隐藏)
color: transparent
font-size: 0(可以消除display：inline-block的间距)
z-index为负数，也要根据实际情况来定

0uzu0 · 2019-06-04T04:28:37Z

1、display:none;
2、 visibily:hidden;
3、overflow:hidden;
4、 z-index:-1
5、 positin:absolute;
left：-999999999;
6、 opacity:0;

yangyiqiqia · 2019-06-04T05:30:50Z

1、dispaly:none
2、visibly:hidden
3、opacity:0
4、width:0;height:0;overflow:hidden
5、position:absolute,left:-9999px(将元素放在用户看不到地方)
6、transform:scale(0)

zhujunwei · 2019-06-04T07:20:54Z

display: none;
visibily: hidden;
opacity: 0;
position: absolute; 绝对定位超出屏幕;
由文本撑起来的块， font-size: 0
css3 transform: scale(0);

chenjiake · 2019-06-04T07:31:22Z

1、display: none;
2、visibility: hidden;
3、opacity: 0;
4、position: absolute(或fixed); left: -9999px;
5、overflow: hidden;
6、height: 0; width: 0;

0xBrooke · 2019-06-04T08:07:10Z

display:none; (不占位隐藏)
visibility:hidden; (占位隐藏)
opacity:0; (占位)
width: 0;height: 0; overflow: hidden;(不占位隐藏)
position:absolute;left:-999%;(fixed;)( 移出可视区域，不占位)
position:relative;left:-999%;( 移出可视区域，占位)
transform: scale(0);(缩放，占位)
transform: translateY(-999%);(移出可视区域，占位)
margin-left:-999%;(移出可视区域，占位)

riluocanyang · 2019-06-04T08:25:21Z

1、dispaly: none;
2、overflow: hidden;
3、width: 0；height: 0; (针对image)
4、visibility: hidden;
5、opacity: 0;

lianbo666 · 2019-06-04T08:52:50Z

1、visibility：hidden，元素会被隐藏，但是不会消失，依然占据空间，隐藏后不会改变HTML原有样式；
2、display：none，不占据空间，把元素隐藏起来，可以理解为在页面中把该元素删了；
3、opacity：0，
4、position：absolute，通过将元素的top和left值设为足够大的负数，使其在屏幕上不可见。

KRISACHAN · 2019-06-04T08:54:54Z

隐藏类型

可见性	屏幕可见	可访问树
完全隐藏	隐藏	隐藏
语义上隐藏	可见	隐藏
视觉上隐藏	隐藏	可见

完全隐藏

此方法会让元素从渲染树中消失，渲染的时候不占据任何空间，且不可进行DOM操作。

hide {
    display: none;
}

此方法相当于 display: none;

<div hidden></div>

语义上的隐藏

此方法使读屏软件不可读，但正常占据空间，且可进行DOM操作。

<div aria-hidden="true"></div>

视觉上的隐藏

此方法使肉眼不可见，但占据正常空间，且不可进行DOM操作。

hide {
    visibility: hidden;
}

此方法使肉眼不可见，但占据正常空间，且可进行DOM操作。

hide {
    opacity: 0;
}

此方法使肉眼不可见，但占据正常空间，且可进行DOM操作。

hide {
    transform: scale(0, 0);
}

此方法把要隐藏的DOM移出到可视位置，不占据正常流，且可进行DOM操作。

:root {
    --biu: -999999px;
}
hide {
    position: absolute;
    left: var(--biu);
    top: var(--biu);
}

此方法使肉眼不可见，但占据正常空间，且可进行DOM操作。

hide {
    clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

此方法使肉眼不可见，但占据正常空间，且可进行DOM操作。

:root {
    --biu: rgba(0, 0, 0, 0);
}
hide {
    border: 1px solid currentcolor;
    color: var(--biu);
    background: currentcolor;
    ...and so on;
}

yaxinlove · 2019-06-04T08:57:12Z

display:none;
visibily:hidden;
3.overflow:hidden;
4.opacity: 0;

Cain-kz · 2019-06-04T09:07:35Z

1.display:none
2.visibly:hidden
3.opacity:0
4.height:0
5.overflow:hidden

CCZX · 2019-06-04T09:25:19Z

display: none;
visibly: hidden;
opacity: 0;
top: -1000px;
transform: translateX()
height: 0;
overflow; hidden

lqzo · 2019-06-04T09:34:40Z

display属性

display: none;

透明度

opacity: 0;

可见性

visibily: hidden;

色值(楼上@KRISACHAN )

:root {
    --biu: rgba(0, 0, 0, 0);
}
hide {
    border: 1px solid currentcolor;
    color: var(--biu);
    background: currentcolor;
    ...and so on;
}

HTML hidden 属性

<element hidden>

clip-path

clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

层级覆盖

z-index: -1;  // 还有其他条件需要达成

transform属性

transform: scale(0, 0);

元素尺寸

width: 0;
// height: 0;

好多属性和方法是第一次看到，今天又是收获满满的一天呢(^o^)/~
感谢各位大佬的解答，还有夕姐的题目的分享。

taoyaoyaoa · 2019-06-04T09:39:26Z

display: none;
visibly: hidden;
opacity: 0;
overflow:hidden；
color: transparent；
position:absolute。
小白只能想到这么多，跟大佬们又学习了~开心

zhangxianhui · 2019-06-04T09:51:50Z

不占位完全隐藏

display:none
visibly:hidden

透明度隐藏

opacity:0
transparant

属性hidden

层级关系

z-index 看情况而定

尺寸大小

136548789 · 2019-06-04T10:06:10Z

1.display:none
2.visibility:hidden
3.绝对定位（大范围移动position:absolute）
4.层级关系(z-index)
5.透明度隐藏(opacity)
只想到这么多

TTTTTTTZL · 2019-06-04T10:17:41Z

display：none；
visibilty：hidden；
position：relative；position：absolute； top：-999999999px；
opacity：0；
z-index：-99；
宽高为0；

gaoluona · 2019-06-04T11:24:18Z

display: none;
visibilty: hidden;
opacity: 0;
z-index: -100;
height: 0; width:0;
position: absolute; top: -99999px;left:-99999px;// 或fixed
overflow: hidden;//溢出隐藏

sinaine · 2019-06-04T11:30:03Z

1.display:none
2.visibilty:hidden
3.position:absolute ;top:-10000px;定位到页面外
4.width:1px;height:0px
5.max-height:0px; max-width: 0px; font-size: 0;
6 .z-index：-999
7. transform: translate(-999px);
8. transform: scale(0);
9.clip-path: circle(0%);
10:文字可以 text-indent: -9999px; 缩进到页面之外
11. opacity: 0;
12. overflow：hidden

LiMinmumu · 2019-06-04T12:54:22Z

1,display: none;
2,visible: hidden;
3,z-index: -1;
4,opacity: 0;
5,transform: translate(-100%)/translateX(-100%)/translateY(-100%);
6,margin-left: -100%;
7,width: 0;

yelin1994 · 2019-06-04T13:00:27Z

display:none
visibility: hidden
opacity: 0
height: 0;overflow:hidden
z-index: -999;position: absolute\relative
position: absolute;top: -9999px或者left: -9999px
transform: scale(0)

lovelycarrot · 2019-06-04T13:24:48Z

display: none;
visibility: hidden
position: absolute/fixed top/left -999px
transform: translateX/translateY -99999px
transform: scale(0)
width: 0; height: 0; overflow: hidden;
opacity: 0

xinran1013 · 2019-06-04T15:08:53Z

display: none; /* 不占据空间
visibility: hidden; /* 占据空间
position: absolute; top: -999px; /* 不占据空间
position: relative; top: -999px; /* 占据空间
position: absolute; visibility: hidden; /* 不占据空间
height: 0; overflow: hidden; /* 不占据空间
opacity: 0; filter:Alpha(opacity=0); /* 占据空间
transform: translate(-100%)/translateX(-100%)/translateY(-100%)

jodiezhang · 2019-06-04T15:58:54Z

display:none
visibility:hidden
position:absolute; top:-100000px; left:-100000px
transform:scale(0)
z-index:-1
opacity:0
width:0; height:0; overflow: hidden

tianyuandsb · 2019-06-05T01:37:02Z

1.display: none;
2.visibility:hidden
3.opacity: 0;
4.transparen
5.通过绝对定位脱离文档流，让位置调整到页面外。

chongyangwang · 2019-06-05T01:42:53Z

设置元素隐藏

1.display:none; /不占位隐藏/
2.visibility:hidden; /z占位隐藏/
3.opacity:0; /透明度隐藏/
4.position /定位属性可根据场景设置定位方式以及值/
5.transparnt /借鉴大佬说的还没用到过（好像是针对字体隐藏）/
http://www.imooc.com/article/39998
6. z-index /层级隐藏/
7. font-size:0 /通过字体撑开的元素可以设置 font-size:0/
8. overflow:hidden: /溢出隐藏/
9.transform:scale(0); /缩放为0 可隐藏/

MissWXiang · 2019-06-05T02:56:27Z

（1）display：none
（2）设置字体大小为0 font-size：0
（3）层级隐藏： z-index
（4）溢出隐藏：overflow：hidden

（微信名：RUN）

lydfree · 2019-06-05T03:31:47Z

1）.display:none
2）.visibility:hidden
3）.font-size:0
4）.position定位+z-index
5）.opacity：0

ivan0525 · 2019-06-05T04:54:44Z

display: none;
opacity: 0;
transform: scale(0)
position定位+z-index
通过定位，将元素定位到屏幕外
visibility: hidden;

web-data-MrLi · 2019-06-05T12:51:44Z

display:none;的元素会直接从页面上消失，因此在该元素上绑定的事件不会生效。

visibility: hidden;的元素不会触发绑定的事件。

opacity:0; 的元素会触发绑定的事件，例如点击会触发click函数。

z-index层级的设置

position脱离文档流，

overflow：hidden溢出元素的隐藏

ccvaille · 2019-06-05T15:17:25Z

opacity: 0;
display: none;
visibility: hidden;
height: 0; overflow:hidden;
position: absolute; top: -9999px; left: -9999px;
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
transform:scale(0);

DazhiFe · 2019-06-05T15:47:37Z

1. opacity

.hide-opacity {
  opacity: 0;
}

通过下面的gif图，我们可以总结opacity隐藏元素有几个特点：

只是视觉上的隐藏，隐藏元素的依然占据着空间，影响其他元素的布局
依然能够响应用户的交互
通过DOM依然可以获取该元素，可以响应DOM事件
其子孙元素即使重新设置了opacity: 1也无法显示
元素和它所有的内容会被读屏软件阅读（没有测试过）

2. visibility

.hide-visibility {
  visibility: hidden;
}

通过下面的gif动图，同样我们可以总结出visibility隐藏元素的特点：

隐藏元素的依然占据着空间，影响其他元素的布局
不会响应任何用户交互
通过DOM依然可以获取该元素，无法响应DOM事件
其子孙元素可以通过重新设置visibility: visible来显示
元素在读屏软件中也会被隐藏（没有测试过）

3. display

是真正意义上的隐藏元素。

.hide-display {
  display: none;
}

通过下面的gif动图，我们可以总结出display: none隐藏元素的特点：

真正意义上的隐藏，元素不会占据任何空间
用户无法与其进行直接的交互
通过DOM依然可以获取到该元素
其子孙元素即使重新设置display: block也无法显示
读屏软件无法读到该元素的内容（没有测试过）
transition动画会失效

4. hidden

HTML5新增的hidden属性，可以直接隐藏元素。

<div hidden>
  我是被隐藏的元素
</div>

特点：

跟display表现一致。

5. position

.hide-position {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

特点：

视觉上的隐藏，实际显示在屏幕的可视区之外，不会占据空间，不影响其他元素的布局
用户无法与其进行直接的交互
元素的内容可以被读屏软件读取（没有测试过）
通过DOM依然可以获取到该元素
其子孙元素无法通过重新设置对应的属性来显示

6. clip-path

通过裁剪元素来实现隐藏。

.hide-clip {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

特点：

视觉上的隐藏，隐藏元素的依然占据着空间，影响其他元素的布局
用户无法与其进行直接的交互
元素的内容可以被读屏软件读取（没有测试过）
通过DOM依然可以获取到该元素
其子孙元素无法通过重新设置对应的属性来显示

7. overflow

通过设置元素的宽高为0来隐藏元素。

.hide-overflow {
  width: 0;
  height: 0;
  overflow: hidden;
}

必须加上overflow: hidden，否则其子孙元素依然可以显示，下面的动图可以说明：

特点：

视觉上的隐藏，隐藏元素的不会占据任何空间，不会影响其他元素的布局
用户无法与其进行直接的交互
元素的内容可以被读屏软件读取（没有测试过）
通过DOM依然可以获取到该元素
其子孙元素无法通过重新设置对应的属性来显示

8. transform

.hide-transform {
  transform: translate(-9999px, -9999px);
}

或者

.hide-transform {
  transform: scale(0);
}

特点：

视觉上的隐藏，隐藏元素的依然占据着空间，影响其他元素的布局
用户无法与其进行直接的交互
元素的内容可以被读屏软件读取（没有测试过）
通过DOM依然可以获取到该元素
其子孙元素无法通过重新设置对应的属性来显示

其他

如果是纯文本的隐藏，可以设置

.hide-text {
  text-indent: -9999px;
}

或者

.hide-text {
  font-size: 0;
}

还有一个是无障碍设计规范里面的：

<div aria-hidden="true"></div>

差异性

上面简单的罗列了8中隐藏元素的方式，其实给我们视觉上的效果，这些方法都可以让元素不可见（也就是我们所说的隐藏）。然而，屏幕并不是唯一的输出机制，比如说屏幕上看不见的元素（隐藏的元素），其中一些依然能够被读屏软件阅读出来（因为读屏软件依赖于可访问性树来阐述）。为了消除它们之间的歧义，我们将其归为三大类：

完全隐藏
视觉上的隐藏
语义上的隐藏

三种类型的隐藏总结下来如下表所示：

可见性状态	屏幕上	可访问性树（读屏软件等）
完全隐藏	隐藏	隐藏
视觉上的隐藏	隐藏	可见
语义上的隐藏	可见	隐藏

完全隐藏

针对上面所列的8种方法，能够实现完全隐藏的只有下面这3种：

display: none
visibility: none
HTML5新增的hidden属性

视觉上的隐藏

opacity
position
transform
clip-path
overflow

语义上的隐藏

aria-hidden="true"

其他区别

隐藏方式	占据原来的空间	直接跟用户交互	直接响应DOM事件
opacity	是	是	是
visibility	是	否	否
display	否	否	否
hidden	否	否	否
position	否	否	否
clip-path	是	否	否
overflow	否	否	否
transform	是	否	否

参考：

【译】用 CSS 隐藏页面元素的 5 种方法

zyq503454535 · 2019-06-06T12:07:21Z

1 display:none;
2 width:0 height:0
3 overflow:hidden;
4 opacity:0;
5 z-index : -10
6 transform: translate(-1000px, -100px);

YvetteLau · 2019-06-08T10:48:40Z

1.将元素移出可视区范围

设置 posoition 为 absolute 或 fixed，�通过设置 top、left 等值，将其移出可视区域。(可视区域不占位)

position:absolute;
left: -99999px;

设置 position 为 relative，通过设置 top、left 等值，将其移出可视区域。（可视区域占位）

position: relative;
left: -99999px;

如希望其在可视区域不占位置，需同时设置 height: 0;

设置 margin 值，将其移出可视区域范围（可视区域占位）。

margin-left: -99999px;

如果希望其在可视区域不占位，需同时设置 height: 0;

2.利用 transfrom

缩放(占据空间)

transform: scale(0);

如果希望不占据空间，需同时设置 height: 0

移动 translateX, translateY(占据空间)

transform: translateX(-99999px);

如果希望不占据空间，需同时设置 height: 0

倾斜90度，并设置height为0(不占据空间)

transform: skew(90deg);
height: 0;

旋转 rotate (不占据空间)

transform: rotateY(90deg);

3.`display` 属性(不占据空间)

display: none;

4.设置其大小为0 (不占据空间)

宽高为0，字体大小为0：

height: 0;
width: 0;
font-size: 0;

宽高为0，超出隐藏:

height: 0;
width: 0;
overflow: hidden;

5.设置透明度为0 (占据空间)

opacity: 0;

6.`visibility`属性 (占据空间)

visibility: hidden

7.层级覆盖，`z-index` 属性 (占据空间)

position: relative;
z-index: -999;

再设置一个层级较高的元素覆盖在此元素上。

8.clip-path 裁剪 (占据空间)

clip-path: polygon(0 0, 0 0, 0 0, 0 0);

9.使用JS从DOM中移除元素

wangjunw · 2019-06-09T05:30:56Z

display:none
height: 0; overflow:hidden;
position: absolute;top: -10000px;
visibility: hidden;
opacity: 0;

6: transform: translateX(-1000px);

transform: scale(0);

luohong123 · 2019-06-11T02:38:06Z

隐藏 display: none
隐藏 visibility: hidden
绝对定位和层级 position: absolute; z-index: -1;
固定定位 position: fixed; left: -9999px;
位移 transform: translateX(-9999px);
缩小 transform: scale(0);
宽高 width: 0; height: 0;
透明度 opacity: 0;
裁剪 clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

Diamondjcx · 2019-06-18T09:40:50Z

1.overflow：hidden 直接隐藏元素
不占位、无法交互、
2.display: none
不占位、可以获取元素、不可与其进行交互、子元素设置display:bloclk 无法显示
3.visibility：hidden
占位、可获取元素、可响应用户交互、不可操作DOM、子元素设置visible可显示
4.opacity：0
占位、可操作DOM、子元素设置opacity：1 不可显示
5.position
不占位、不可交互、可获取元素
6.clip-path
.hide-clip {
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
占位、用户无法进行直接交互、可获取元素
7.transform 利用动画
占位、无法与其交互、可获取元素

YvetteLau mentioned this issue Jun 23, 2019

【Step-By-Step】一周面试题深入解析 / 周刊03 YvetteLau/Blog#33

Open

如何隐藏页面中的某个元素？(越多方式越好) #19

如何隐藏页面中的某个元素？(越多方式越好) #19

Comments

YvetteLau commented Jun 4, 2019

evliskin commented Jun 4, 2019

yangjianwei1223 commented Jun 4, 2019

darlingyz commented Jun 4, 2019

shenanheng commented Jun 4, 2019

daibin0809 commented Jun 4, 2019

kaiking01 commented Jun 4, 2019 • edited Loading

killbymywind commented Jun 4, 2019

woyiweita commented Jun 4, 2019 • edited Loading

元素隐藏

into-piece commented Jun 4, 2019

xdandsl commented Jun 4, 2019 • edited Loading

AILINGANGEL commented Jun 4, 2019

Liruimin2 commented Jun 4, 2019

MissNanLan commented Jun 4, 2019

0uzu0 commented Jun 4, 2019

yangyiqiqia commented Jun 4, 2019

zhujunwei commented Jun 4, 2019

chenjiake commented Jun 4, 2019

0xBrooke commented Jun 4, 2019

riluocanyang commented Jun 4, 2019

lianbo666 commented Jun 4, 2019

KRISACHAN commented Jun 4, 2019 • edited Loading

隐藏类型

完全隐藏

语义上的隐藏

视觉上的隐藏

yaxinlove commented Jun 4, 2019

Cain-kz commented Jun 4, 2019

CCZX commented Jun 4, 2019

lqzo commented Jun 4, 2019 • edited Loading

taoyaoyaoa commented Jun 4, 2019

zhangxianhui commented Jun 4, 2019

不占位 完全隐藏

透明度隐藏

属性hidden

层级关系

尺寸大小

136548789 commented Jun 4, 2019

TTTTTTTZL commented Jun 4, 2019

gaoluona commented Jun 4, 2019

sinaine commented Jun 4, 2019 • edited Loading

LiMinmumu commented Jun 4, 2019

yelin1994 commented Jun 4, 2019

lovelycarrot commented Jun 4, 2019

xinran1013 commented Jun 4, 2019

jodiezhang commented Jun 4, 2019

tianyuandsb commented Jun 5, 2019

chongyangwang commented Jun 5, 2019 • edited Loading

MissWXiang commented Jun 5, 2019

lydfree commented Jun 5, 2019

ivan0525 commented Jun 5, 2019

web-data-MrLi commented Jun 5, 2019

ccvaille commented Jun 5, 2019

DazhiFe commented Jun 5, 2019

1. opacity

2. visibility

3. display

4. hidden

5. position

6. clip-path

7. overflow

8. transform

其他

差异性

完全隐藏

视觉上的隐藏

语义上的隐藏

其他区别

zyq503454535 commented Jun 6, 2019

YvetteLau commented Jun 8, 2019

1.将元素移出可视区范围

2.利用 transfrom

3.display 属性(不占据空间)

4.设置其大小为0 (不占据空间)

5.设置透明度为0 (占据空间)

6.visibility属性 (占据空间)

kaiking01 commented Jun 4, 2019 •

edited

Loading

woyiweita commented Jun 4, 2019 •

edited

Loading

xdandsl commented Jun 4, 2019 •

edited

Loading

KRISACHAN commented Jun 4, 2019 •

edited

Loading

lqzo commented Jun 4, 2019 •

edited

Loading

不占位完全隐藏

sinaine commented Jun 4, 2019 •

edited

Loading

chongyangwang commented Jun 5, 2019 •

edited

Loading

3.`display` 属性(不占据空间)

6.`visibility`属性 (占据空间)

7.层级覆盖，`z-index` 属性 (占据空间)