Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

undefinedYu

undefinedYu commented on Apr 19, 2019

@undefinedYu
Contributor
  • 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

yxkhaha commented on Apr 19, 2019

@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

Damon99999 commented on Jun 18, 2019

@Damon99999

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

MartinsYong

MartinsYong commented on Jun 19, 2019

@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

Konata9 commented on Jul 1, 2019

@Konata9

利用 dispaly

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

利用 position (absolute 的情况下)

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

poporeki commented on Jul 4, 2019

@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

Lianfeiru commented on Jul 29, 2019

@Lianfeiru

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

display:none;//对页面布局起作用,不会响应任何用户交互

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

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

DingkeXue

DingkeXue commented on Aug 14, 2019

@DingkeXue

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

xcLtw

xcLtw commented on Aug 27, 2019

@xcLtw

这里学到的几个:

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

censek commented on Sep 26, 2019

@censek

// div 不占任何位置

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

// div 还在占位

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

RQSA commented on Oct 4, 2019

@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

0x3c commented on Oct 14, 2019

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

Bravo123 commented on Oct 21, 2019

@Bravo123

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

BinghuiXie

BinghuiXie commented on Oct 21, 2019

@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

暂时就想到这么多

25 remaining items

tk12138

tk12138 commented on Nov 4, 2021

@tk12138

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

baiye0

baiye0 commented on Dec 30, 2021

@baiye0

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

yxllovewq

yxllovewq commented on Mar 7, 2022

@yxllovewq

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

syfine

syfine commented on Apr 11, 2022

@syfine

影响布局

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

不影响布局

  • display : none
kankan-web

kankan-web commented on May 11, 2022

@kankan-web

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

xiaoxiaozhiya

xiaoxiaozhiya commented on May 26, 2022

@xiaoxiaozhiya

设置visibility:hidden

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

display:none

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

tansform.scale(0)

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

opacity:0

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

绝对定位+z-index

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

绝对定位+负margin

  • 元素脱标
  • 元素只是不在视区
www-wanglong

www-wanglong commented on Jun 12, 2022

@www-wanglong

占位

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

不占位

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

WangXi01 commented on Jul 12, 2022

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

17600774441 commented on Sep 28, 2022

@17600774441

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

Iambecauseyouare

Iambecauseyouare commented on Feb 10, 2023

@Iambecauseyouare

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)

kukupii

kukupii commented on Feb 21, 2023

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

keenesun commented on Oct 25, 2023

@keenesun

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

lili-0923

lili-0923 commented on Feb 2, 2024

@lili-0923

display:none;opacity: 0;

pengsir120

pengsir120 commented on Sep 3, 2024

@pengsir120

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

xiaotangaichihuluobo

xiaotangaichihuluobo commented on Sep 19, 2024

@xiaotangaichihuluobo

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ferrinweb@haizhilin2013@Konata9@xcLtw@MartinsYong

        Issue actions

          [css] 第3天 在页面上隐藏元素的方法有哪些? · Issue #8 · haizlin/fe-interview