[css] 第3天 在页面上隐藏元素的方法有哪些？ about fe-interview HOT 51 OPEN

占位:

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

不占位:

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

仅对块内文本元素:

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

from fe-interview.

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

from fe-interview.

• 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);

from fe-interview.

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

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

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

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

from fe-interview.

利用 dispaly

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

利用 position （absolute 的情况下）

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

from fe-interview.

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

一、全局属性 hidden

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

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

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

二、display: none;

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

三、visible:hidden

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

四、使用定位（position）

1. 通过z-index

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

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

2. 通过位置或者margin

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

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

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

3. 使用 transform

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

scale：缩放

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

4. 使用透明度

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

from fe-interview.

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

from fe-interview.

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

from fe-interview.

// div 不占任何位置

1. display: none;
2. transform: scale(0);
3. width: 0;
   height: 0;
   overflow: hidden;

// div 还在占位

1. opacity: 0;
2. visibility: hidden;

from fe-interview.

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

暂时就想到这么多

from fe-interview.

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

from fe-interview.

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)/* 占据空间，无法点击 */
}

from fe-interview.

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

from fe-interview.

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

配合绝对定位

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

放在最底层

• z-index:-99999999999

from fe-interview.

这里学到的几个：

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

from fe-interview.

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

from fe-interview.

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

from fe-interview.

background: transparent;

from fe-interview.

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

from fe-interview.

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

from fe-interview.

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

from fe-interview.

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%_

from fe-interview.

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

from fe-interview.

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');

from fe-interview.

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;

from fe-interview.

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

from fe-interview.

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

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

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

from fe-interview.

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

from fe-interview.

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

from fe-interview.

display : none

visibility : hidden;

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

margin-left: -100%;

opacity: 0;

font-size:0;

from fe-interview.

display:none
opacity:0;
visibility: hidden

from fe-interview.

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

from fe-interview.

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

from fe-interview.

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

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

from fe-interview.

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

from fe-interview.

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

from fe-interview.

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

from fe-interview.

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

from fe-interview.

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

from fe-interview.

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

from fe-interview.

总结：
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;

from fe-interview.

影响布局

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

不影响布局

• display : none

from fe-interview.

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

from fe-interview.

设置visibility:hidden

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

display:none

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

tansform.scale(0)

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

opacity:0

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

绝对定位+z-index

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

绝对定位+负margin

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

from fe-interview.

占位

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

不占位

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

from fe-interview.

1. display:none
2. visibility:hidden
3. 定位到屏幕外面
4. z-index负
5. opacity
6. transform: scale(0)
7. 宽高设为0

from fe-interview.

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

from fe-interview.

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)

from fe-interview.

1. display:none;
2. opaicty:0;
3. visiblity: hidden;
4. position为absolute配合z-index:-9999；

from fe-interview.

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

from fe-interview.

display：none；opacity: 0;

from fe-interview.