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

[haizhilin2013]

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

[undefinedYu]

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

[yxkhaha]

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

[Damon99999]

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

[MartinsYong]

占位:

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

不占位:

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

仅对块内文本元素:

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

[Konata9]

利用 dispaly

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

利用 position （absolute 的情况下）

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

[poporeki]

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

配合绝对定位

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

放在最底层

• z-index:-99999999999

[Lianfeiru]

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

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

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

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

[DingkeXue]

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

[xcLtw]

这里学到的几个：

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

[censek]

// div 不占任何位置

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

// div 还在占位

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

[RQSA]

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

[sosamuel]

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

[Bravo123]

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

[BinghuiXie]

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

暂时就想到这么多

[zlqGitHub]

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;

[c37csq]

background: transparent;

[Renato-Z]

<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;
}

1. 通过位置或者margin

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

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

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

1. 使用 transform

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

scale：缩放

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

1. 使用透明度

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

[ferrinweb]

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

[larry0442]

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

[artoriaforDY]

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

[blueRoach]

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

[giggleCYT]

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

[lxynew1]

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

[freezebreze]

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;

[crush2020]

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