[css] 第3天 在页面上隐藏元素的方法有哪些?并简述出第一种方法的应用场景和优劣势。
Activity
undefinedYu commentedon Apr 19, 2019
yxkhaha commentedon Apr 19, 2019
Damon99999 commentedon Jun 18, 2019
display: none;
opacity: 0;
z-index: -999;
利用位置属性
MartinsYong commentedon Jun 19, 2019
占位:
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 commentedon Jul 1, 2019
利用 dispaly
利用 position (absolute 的情况下)
poporeki commentedon Jul 4, 2019
配合绝对定位
放在最底层
Lianfeiru commentedon Jul 29, 2019
opacity:0; //视觉上的隐藏
display:none;//对页面布局起作用,不会响应任何用户交互
visibility:hidden; //被隐藏的元素不占据任何空间
//屏幕上不可见
position:absolute;
top:-9999px;
left:-9999px;
DingkeXue commentedon Aug 14, 2019
大家都没有说优缺点啊。从性能的角度来说,disaplay: none; 页面不会渲染,可以减少首屏渲染的时间,但是会引起回流和重绘。
visibility: hidden; 页面会渲染只是不限显示。opacity: 0; 看不见,但是会占据空间。只会引起重绘
xcLtw commentedon Aug 27, 2019
这里学到的几个:
transform
是一个功能丰富的转换函数opacity:0
一致censek commentedon Sep 26, 2019
// div 不占任何位置
height: 0;
overflow: hidden;
// div 还在占位
RQSA commentedon Oct 4, 2019
0x3c commentedon Oct 14, 2019
display: none;
visibility: hidden;
opacity: 0;
transform: rotateY(90deg);
/transform: rotateX(90deg);
Bravo123 commentedon Oct 21, 2019
补充一个:
transform: skew(90deg, -90deg)
BinghuiXie commentedon Oct 21, 2019
display: none
visibility: hidden
opacity: 0
width: 0; height: 0; overflow: hidden
overflow: hidden
,同时子元素margin-left: -100%
,而且,这种情况有限制:text-indent: -9999px
使其超出屏幕范围,如果屏幕需要左右滑动,那么最好在父元素上加一个overflow: hidden
暂时就想到这么多
25 remaining items
tk12138 commentedon Nov 4, 2021
display:none;和visibility:hidden;
display:none;会让元素完全从文档树中消失,渲染时不占据任何空间。属于非继承属性。
Visibility:hidden;不会让元素从文档树中消失,会继续占据空间,只是内容不可见。属于继承属性。
baiye0 commentedon Dec 30, 2021
1.设置opacity透明度为0
2.设置visibility:hidden;
3.设置display:none;
4.设置宽或者高为0;
5.如果有与其他层级重叠,设置z-index
6.设置位置超出屏幕,如用text-indent,或者margin等
yxllovewq commentedon Mar 7, 2022
总结:
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 commentedon Apr 11, 2022
影响布局
不影响布局
kankan-web commentedon May 11, 2022
1.display:none;
会导致浏览器的重排重绘
2.overflow:hidden;
会导致浏览器的重绘
3.opacity:0;透明度设置为0
4.z-index:负值;将其被别的元素覆盖
5.position:absolution;移出可视区
6.transform:scale(0,0);缩小为0
xiaoxiaozhiya commentedon May 26, 2022
www-wanglong commentedon Jun 12, 2022
占位
不占位
WangXi01 commentedon Jul 12, 2022
17600774441 commentedon Sep 28, 2022
我来个骚的:
父元素:tranform-style:preserve-3d;
子元素:tranform:rotateY(-180deg);backface-visibility:hidden;
优点:骚;
Iambecauseyouare commentedon Feb 10, 2023
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 commentedon Feb 21, 2023
display:none;
opaicty:0;
keenesun commentedon Oct 25, 2023
#1. visibility: hidden;
#2. display: none;
#3. opacity: 0;
#4. font-size: 0;
#5. z-index遮盖
#6. 定位/偏移
lili-0923 commentedon Feb 2, 2024
display:none;opacity: 0;
pengsir120 commentedon Sep 3, 2024
display: none;
visibility: hidden;
opacity: 0;
给元素设置绝对定位,top或bottom设置9999px,left或right设置9999px
xiaotangaichihuluobo commentedon Sep 19, 2024
display:none
不占用空间
opacity:0
透明但占用空间
visiblity:hidden
隐藏但占用空间