[css] 第3天在页面上隐藏元素的方法有哪些？

Question

[css] 第3天在页面上隐藏元素的方法有哪些？

haizhilin2013 opened this issue 6 years ago · 53 comments

haizhilin2013 commented 6 years ago

[css] 第3天在页面上隐藏元素的方法有哪些？并简述出第一种方法的应用场景和优劣势。

Answer 1 · 2019-04-19T05:28:46.000Z

position配合z-index; 或者 left/top/bottom/right ： -100%；
margin-left: -100%;
width: 0; height: 0; overflow: hidden;这个算吗
opacity: 0;
display:none;
transform: scale(0)/translateX(+-100%)/translateY(+-100%)/rotateX(90deg);
filter: opacity(0);

Answer 2 · 2019-04-19T13:28:28.000Z

display: none
opacity: 0
visibility: hidden
z-index: -9999999999999
transform: scale(0)
margin-left: -100%
position: relative; left: -100%
width: 0; height: 0;

Answer 3 · 2019-06-18T02:17:59.000Z

display: none;
opacity: 0;
z-index: -999;
利用位置属性

Answer 4 · 2019-06-19T04:27:39.000Z

占位:

visibility: hidden;
margin-left: -100%;
opacity: 0;
transform: scale(0);

不占位:

display: none;
width: 0; height: 0; overflow: hidden;

仅对块内文本元素:

text-indent: -9999px;
font-size: 0;

Answer 5 · 2019-07-01T05:40:43.000Z

利用 dispaly

disaplay: none; 页面不会渲染
visibility: hidden; 页面会渲染只是不限显示
opacity: 0; 看不见，但是会占据空间

利用 position （absolute 的情况下）

left/right/top/bottom: 9999px/-9999px 让元素在视区外
z-index: -9999 放到最底层，同一位置可以让其他元素把这个给遮掉

Answer 6 · 2019-07-04T14:00:17.000Z

display:none;
overflow:hidden;
visibility:hidden;
opacity:0;
width:0,height:0;

配合绝对定位

left:-100vw;
right:100vw;
top:-100vh;
bottom:100vh;

放在最底层

z-index:-99999999999

Answer 7 · 2019-07-29T12:46:20.000Z

opacity:0; //视觉上的隐藏

display：none；//对页面布局起作用，不会响应任何用户交互

visibility：hidden； //被隐藏的元素不占据任何空间

//屏幕上不可见
position:absolute;
top:-9999px;
left:-9999px;

Answer 8 · 2019-08-14T04:32:12.000Z

大家都没有说优缺点啊。从性能的角度来说，disaplay: none; 页面不会渲染，可以减少首屏渲染的时间，但是会引起回流和重绘。
visibility: hidden; 页面会渲染只是不限显示。opacity: 0; 看不见，但是会占据空间。只会引起重绘

Answer 9 · 2019-08-27T07:25:57.000Z

这里学到的几个：

transform: scale(0); transform是一个功能丰富的转换函数
margin-left: -100%; 效果一般
visibility：hidden; 隐藏内容，但占位可能保留，效果与 opacity:0一致
width,height,overflow配合，可以达到 display:none的效果

Answer 10 · 2019-09-26T08:31:41.000Z

// div 不占任何位置

display: none;
transform: scale(0);
width: 0;
height: 0;
overflow: hidden;

// div 还在占位

opacity: 0;
visibility: hidden;

Answer 11 · 2019-10-04T04:54:54.000Z

display: none

opacity: 0

visibility: hidden

z-index: -9999999999999

transform: scale(0)

margin-left: -100%

position: relative; left: -100%

width: 0; height: 0;

Answer 12 · 2019-10-14T05:29:41.000Z

设置不显示: display: none;
隐藏: visibility: hidden;
透明度: opacity: 0;
将元素移动到视口之外( 定位, 负 margin, translate 平移).
元素元素高为 0.
翻转元素, 沿 X/Y 轴旋转到看不见: transform: rotateY(90deg); / transform: rotateX(90deg);

Answer 13 · 2019-10-21T02:24:53.000Z

补充一个:
transform: skew(90deg, -90deg)

Answer 14 · 2019-10-21T07:30:06.000Z

display: none
visibility： hidden
opacity: 0
对应元素的 html 标签上添加 hidden 属性
width: 0; height: 0; overflow: hidden
父元素 overflow: hidden，同时子元素 margin-left: -100%，而且，这种情况有限制：
- 子元素不能设置右浮动 ( margin 的方向与 float 的方向相反，就不起作用 )(我自己只试出来这种情况下不行)
如果子元素是内联元素或者 inline-block 元素，可以在父元素上设置 text-indent: -9999px 使其超出屏幕范围，如果屏幕需要左右滑动，那么最好在父元素上加一个 overflow: hidden

暂时就想到这么多

Answer 15 · 2019-12-22T00:49:37.000Z

display: none; 隐藏不占位
visibility: hidden; 隐藏站位
opacity: 0; 设置其透明度为0，视觉上隐藏占位
position: relative; margin-top: -10000px; 设置定位让元素大幅度偏离文档流
transform: scale(0) 设置元素缩放比例为0，起到display:none; 的作用
width:0; height:0; overflow: hidden;

Answer 16 · 2020-03-04T09:04:29.000Z

background: transparent;

Answer 17 · 2020-03-10T08:46:54.000Z

<div class="box"></div>

一、全局属性 hidden

hidden：布尔属性表示元素尚未或不再相关。例如，它可以用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会渲染此类元素。不得使用此属性隐藏可以合法显示的内容。

也就是说这个方法隐藏的元素不会在页面中占据位置

<div class="box" hidden></div>

二、`display: none;`

这个属性会让元素在页面中消失，不占据实际的空间

三、`visible:hidden`

这个属性会让元素在页面中'隐身'，也就是说只是单纯的看不见了，但是原来的空间依然被该元素占据

四、使用定位（position）

通过z-index

position: absolute;：让元素脱标，不占实际的位置
z-index: -1;：使用层级隐藏在其他元素之下

.box {
  position: absolute;
  z-index: -1;
}

通过位置或者margin

left: -500%; 、margin-left: -500%;：让元素的位置在当前可是区域之外

.box {
  position: absolute;
  left: -500%;
}

.box {
  position: absolute;
  margin-left: -500%;
}

使用 transform

必须使用position配合，让元素脱标，不然还会占据空间

scale：缩放

.box {
  position: absolute;
  /* 1.缩放 */
  transform: scale(0);
  /* 2.位移 */
  transform: translateX(-200%);
  /* 3.旋转 */
  transform: rotateX(90deg);
}

使用透明度

.box {
  position: absolute;
  opacity: 0;
}

Answer 18 · 2020-03-11T01:04:02.000Z

在满足 overflow: hidden 时: padding/margin/line-height/text-indent…

Answer 19 · 2020-04-07T01:30:13.000Z

移出屏幕可视范围 margin/定位/transform
宽高为0 width&height/ sacle(0)
透明度 opacity
隐藏 display
隐身 visible

Answer 20 · 2020-04-21T06:17:19.000Z

位移：position,margin,transform,text-indent，都设置-9999px；
宽高为0；
display:none；
visibility:hidden；
opacity:0；
用其他模块覆盖住；

Answer 21 · 2020-05-14T14:07:02.000Z

1.display: none
2.visibility: hidden
3.opacity: 0

其他大佬的：
4.全局属性 hidden (不会占据空间，与display:none一样)
5.position:absolute;
(1)z-index: -1
(2)transform:scale(0)
(3)left: -10000%_

Answer 22 · 2020-05-28T02:08:32.000Z

display:none 页面不渲染
visibility：hidden 页面渲染不显示
opacity：0 元素隐藏，但是如果绑定了事件依旧可以触发
z-index：-9999 在其他元素之下
left/right/top/bottom:：9999px/-9999px 让元素在视区外

Answer 23 · 2020-07-01T01:59:17.000Z

function delLast(str, target){
				var map = str.split(target);
				var newstr = '';
				console.log(map);
				for(var i = 0;i < map.length;i++){
					if(i === map.length - 1 || i === map.length - 2){
						newstr = newstr + map[i];
					}else{
						newstr = newstr + map[i] + target;
					}
				}
				return newstr;
			}
			delLast('abcc abcdabceabc','abc');

Answer 24 · 2020-09-16T15:36:24.000Z

visibility: hidden;
display: none;
opacity: 0;
z-index: -99999999999;
margin-left: -100%;
transform: scale(0);
width: 0; height: 0; overflow: hidden
text-indent: -9999px;
font-size: 0;

Answer 25 · 2021-01-20T02:03:21.000Z

1.display：none 隐藏元素，页面不会渲染
2.opacity: 0 透明度
3.z-index：0 层级
4.定位到看不到的地方，使用方法有很多
5.visibility: hidden; 页面会渲染，只是不显示

Answer 26 · 2021-01-21T12:22:54.000Z

嘿嘿，这个也来答答。
一般来说，使用：display: none;就隐藏了，但是，这个在表单里面使用的时候好像会拿不到值：比如做一个自定义选择框，input元素会隐藏。
所以还有以下方案：

position: absolute;
z-index: -1;
visibility: hidden;

这样就能隐藏而不占位，也会保留表单功能。

Answer 27 · 2021-01-27T02:08:12.000Z

display:none;
visibility : hidden;
div{
position: relative;
left: -100%
}
.div{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
};
.div{
width: 0px;
height: 0px;
}

Answer 28 · 2021-01-27T02:09:46.000Z

display : none
visibility : hidden
position: relative;
left: -100%
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 0px;
height: 0px;
opacity: 0;

Answer 29 · 2021-02-22T22:52:52.000Z

display : none

visibility : hidden;

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

margin-left: -100%;

opacity: 0;

font-size:0;

Answer 30 · 2021-04-06T15:18:20.000Z

display:none
opacity:0;
visibility: hidden

Answer 31 · 2021-04-09T02:53:09.000Z

1.设置opacity透明度为0
2.设置visibility:hidden;
3.设置display:none；
4.设置宽或者高为0；
5.如果有与其他层级重叠，设置z-index
6.设置位置超出屏幕，如用text-indent，或者margin等

Answer 32 · 2021-06-28T02:13:35.000Z

opacity: 0;
z-index: -999999999999;
position: relative;
left: -100%;
transform: scale(0);
display: none;

Answer 33 · 2021-08-21T14:05:25.000Z

占位:
visibility: hidden;
margin-left: -100%;
opacity: 0;
transform: scale(0);
不占位:
display: none;
width: 0; height: 0; overflow: hidden;
仅对块内文本元素:

text-indent: -9999px;
font-size: 0;

Answer 34 · 2021-08-26T08:22:06.000Z

display: none;
opacity:0
设置宽高为0
visibilty: hidden

Answer 35 · 2021-09-29T09:33:46.000Z

display: none; 和 visibility: hidden; opacity: 0; 的区别三者都实现隐藏功能但前者没有渲染该元素后两者者渲染了
transform: scale(0); 标签宽高为0*0 但实际盒子宽高不为0
margin-left: -100%; 改变标签宽高并且多了margin值

Answer 36 · 2021-10-21T20:09:45.000Z

display:none

将元素设置为display:none后，元素在页面上将彻底消失

元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘

• 读屏软件不会阅读元素中的内容
• 元素将从页面中消失，元素不可见甚至连盒子模型也不会生成，不会占用页面任何空间
• 元素上所有的事件将无法被正常触发
• 子孙元素同时被隐藏
• 该状态下为元素添加其他过渡效果都是无效的，因为切换状态的时候都是立即生效

注意:通过 DOM 依然可以访问到这个元素，因此你可以通过 DOM 来操作它。

visibility: hidden

元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排

• 读屏软件不会阅读元素中的内容
• 元素不会显示，但是依然占据原本该有的空间位置，元素上的点击事件不能被触发
• visibility属性可继承，子元素可以通过设置visibility:visible来实现可见
• 如果子元素为visible，那么子元素的点击事件可被触发，此时visibility为hidden的父级元素的事件会在事件冒泡阶段被触发
• 能够实现动画效果，只要它的初始和结束状态不一样。这确保了 visibility 状态切换之间的过渡动画可以是时间平滑的（事实上可以用这一点来用 hidden 实现元素的延迟显示和隐藏）

适用场景：不希望页面布局会发生变化

opacity: 0

设置元素透明度，设置成0相当于隐藏元素

• 读屏软件会阅读元素中的内容
• 元素依旧存在页面上，并且会占用页面空间位置
• 元素上绑定的事件可以被正常触发；
• opacity可被继承，子元素可以通过设置opacity:1来实现可见

position

将元素移出可视区域，这个办法既不会影响布局，又能让元素保持可以操作

.hide1{
    /* 将元素的position属性设置为absolute，并且top和left设置为极大负值（将元素移出视窗外面） */
    position：absolute; 
    left:-99999px;
    top:-90999px; /* 不占据空间，无法点击 */
}
.hide2{
    /* 将元素的position属性设置为relative，并且top和left设置为极大负值（将元素移出视窗外面） */
    position：relative;
    left:-99999px;
    top:-90999px; /* 占据空间，无法点击 */
}

• 读屏软件会阅读元素中的内容
• 元素依然存在页面上，会影响页面的布局
• 绑定事件可被正常触发
• position属性可被继承（position: inherit），子元素可以通过设置relative、position、fixed、inherit配合top、bottom、right、left值重新进行定位

适用场景：有一个元素你想要与它交互，但是你又不想让它影响你的网页布局

clip/clip-path

clip-path使用裁剪方式创建元素的可显示区域区域内的部分显示，区域外的隐藏。容易实现一些复杂的图形（chrome40+浏览器）

已废弃：clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute的元素。

.hide1{
    position:absolute;/*fixed*/
    clip:rect(top,right,bottom,left);/* 占据空间，无法点击 */
}
.hide2 {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

z-index

设置z-index值使其它元素遮盖该元素

.hide1{
    position:absolute;
    z-index:-1000;/* 不占据空间，无法点击 */
}

transform

scale() 用于修改元素的大小

.hide1{
    transform: scale(0,0)/* 占据空间，无法点击 */
}

Answer 37 · 2021-10-25T02:46:59.000Z

dispaly: none; 元素消失于文档流
visibility: hidden; 元素占位隐藏；
position定位隐藏，元素消失在可视区域；
opacity: 调整透明度

Answer 38 · 2021-11-01T11:15:42.000Z

dispaly:none;
width:0;heigth:0;
visibility:hidden;
opacity:0;

Answer 39 · 2021-11-04T12:59:37.000Z

display:none;和visibility:hidden;
display:none;会让元素完全从文档树中消失，渲染时不占据任何空间。属于非继承属性。
Visibility:hidden;不会让元素从文档树中消失，会继续占据空间，只是内容不可见。属于继承属性。

Answer 40 · 2021-12-30T07:26:45.000Z

1.设置opacity透明度为0
2.设置visibility:hidden;
3.设置display:none；
4.设置宽或者高为0；
5.如果有与其他层级重叠，设置z-index
6.设置位置超出屏幕，如用text-indent，或者margin等

Answer 41 · 2022-03-07T08:28:20.000Z

总结：
display: none;
width: 0;height: 0;overflow: hidden;
visibility: hidden;
opacity: 0;
filter: opacity(0);
transform: scale(0);
index: -9999px;
margin-left;
top; left;right;bottom;
font-size:0;
text-indent: -9999px;

Answer 42 · 2022-04-11T07:49:20.000Z

影响布局

visibility :hidden
opacity : 0
transform : scale(0)
z-index:-99999999

不影响布局

display : none

Answer 43 · 2022-05-11T03:12:00.000Z

1.display:none;
会导致浏览器的重排重绘
2.overflow:hidden;
会导致浏览器的重绘
3.opacity:0;透明度设置为0
4.z-index:负值;将其被别的元素覆盖
5.position:absolution;移出可视区
6.transform:scale(0,0);缩小为0

Answer 44 · 2022-05-26T06:08:45.000Z

设置visibility:hidden

该属性会被继承
元素不脱标，导致浏览器重绘
点击事件点击不了
可以设置子元素visible，通过事件冒泡来点击

display:none

让元素不会被渲染，不占空间，脱标，引起重排重绘

tansform.scale(0)

和display效果一样
会引起重排和重绘

opacity:0

设置透明度为0，不脱标
可以使用点击事件

绝对定位+z-index

元素脱标，引起重绘和重排
使得元素被压在下方

绝对定位+负margin

元素脱标
元素只是不在视区

Answer 45 · 2022-06-12T13:39:43.000Z

占位

visibility: hidden
opacity: 0 透明度设置为0
transform: scale(0) 放大0倍
margin-left: -100%

不占位

display: none
width: 0; height: 0; overflow: hidden

Answer 46 · 2022-07-12T09:12:08.000Z

display:none
visibility:hidden
定位到屏幕外面
z-index负
opacity
transform: scale(0)
宽高设为0

Answer 47 · 2022-09-28T05:34:00.000Z

我来个*的:
父元素：tranform-style:preserve-3d;
子元素：tranform:rotateY(-180deg);backface-visibility:hidden;
优点：*；

Answer 48 · 2023-02-10T01:38:11.000Z

overflow:hidden
opacicty:0
visibility:hidden
display:none
position:absolute
left:-99999px;
top:-99999px;
clip:rect(top,right,bottom,left)
clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px)
z-index:-999
transform:scale(0,0)

Answer 49 · 2023-02-21T09:42:22.000Z

display:none;
opaicty:0;
visiblity: hidden;
position为absolute配合z-index:-9999；

Answer 50 · 2023-10-25T01:09:44.000Z

#1. visibility: hidden;
#2. display: none;
#3. opacity: 0;
#4. font-size: 0;
#5. z-index遮盖
#6. 定位/偏移

Answer 51 · 2024-02-02T02:04:52.000Z

display：none；opacity: 0;

Answer 52 · 2024-09-03T08:37:30.000Z

display: none;
visibility: hidden;
opacity: 0;
给元素设置绝对定位，top或bottom设置9999px，left或right设置9999px

Answer 53 · 2024-09-19T16:10:10.000Z

display：none
不占用空间
opacity：0
透明但占用空间
visiblity:hidden
隐藏但占用空间

占位:

不占位:

利用 dispaly

利用 position （absolute 的情况下）

一、全局属性 hidden

二、display: none;

三、visible:hidden

四、使用定位（position）

display:none

visibility: hidden

opacity: 0

position

clip/clip-path

z-index

transform

影响布局

不影响布局

占位

不占位

二、`display: none;`

三、`visible:hidden`