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

[0x3c]

• 设置不显示: 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

暂时就想到这么多