Repository navigation
[css] 第3天 在页面上隐藏元素的方法有哪些？ #8
Description
Activity
- 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);
Reacted by up, Old won, seho, 吴文昌, lisin, evo, 桥北丷, Starscape000, songjoe, kruz and 12 more- display: none
- opacity: 0
- visibility: hidden
- z-index: -9999999999999
- transform: scale(0)
- margin-left: -100%
- position: relative; left: -100%
- width: 0; height: 0;
Reacted by jifengdehao, tiyunchen, abin, WangHao, up, zhuxiyan, yingzi, Cao Ruiqi, nowakiisdd, Jacob and 25 moreReacted by Future23365, p992202933 and Totoro1998display: none;
opacity: 0;
z-index: -999;
利用位置属性占位:
visibility: hidden;margin-left: -100%;opacity: 0;transform: scale(0);
不占位:
display: none;width: 0; height: 0; overflow: hidden;
仅对块内文本元素:
text-indent: -9999px;font-size: 0;
Reacted by up, Zhengping Qiao, kokokele, 起风了, 刘刘刘刘, 魏, Amu, ray, wxzg, 吴文昌 and 79 moreReacted by kopair, MisakaMikoto, xzh97, SaberInoryKiss, lm-9315, GeassAthena, senjie, dalovehui and huxuedongReacted by 莫哈, Mickxuanyuan, lm-9315, lxp and Yunni_noteReacted by foundandstudy, dalovehui and huxuedong利用 dispaly
- disaplay: none; 页面不会渲染
- visibility: hidden; 页面会渲染只是不限显示
- opacity: 0; 看不见，但是会占据空间
利用 position （absolute 的情况下）
- left/right/top/bottom: 9999px/-9999px 让元素在视区外
- z-index: -9999 放到最底层，同一位置可以让其他元素把这个给遮掉
Reacted by wuliTaoLeo, MisakaMikoto, zhangshuo, hxy and w666y- display:none;
- overflow:hidden;
- visibility:hidden;
- opacity:0;
- width:0,height:0;
配合绝对定位
- left:-100vw;
- right:100vw;
- top:-100vh;
- bottom:100vh;
放在最底层
- z-index:-99999999999
opacity:0; //视觉上的隐藏
display：none；//对页面布局起作用，不会响应任何用户交互
visibility：hidden； //被隐藏的元素不占据任何空间
//屏幕上不可见
position:absolute;
top:-9999px;
left:-9999px;Reacted by 1242793152Reacted by hhliu, jake-yuyu, 大连脏脏虎, 1379189912, 名侦探嗑糖, dalovehui and KarmaLostReacted by jake-yuyu, hehecat and KarmaLost大家都没有说优缺点啊。从性能的角度来说，disaplay: none; 页面不会渲染，可以减少首屏渲染的时间，但是会引起回流和重绘。
visibility: hidden; 页面会渲染只是不限显示。opacity: 0; 看不见，但是会占据空间。只会引起重绘Reacted by hxy, Whoami and mia这里学到的几个：
- transform: scale(0);
transform是一个功能丰富的转换函数 - margin-left: -100%; 效果一般
- visibility：hidden; 隐藏内容，但占位可能保留，效果与
opacity:0一致 - width,height,overflow配合，可以达到 display:none的效果
- transform: scale(0);
// div 不占任何位置
- display: none;
- transform: scale(0);
- width: 0;
height: 0;
overflow: hidden;
// div 还在占位
- opacity: 0;
- visibility: hidden;
Reacted by hexuerong- display: none
- opacity: 0
- visibility: hidden
- z-index: -9999999999999
- transform: scale(0)
- margin-left: -100%
- position: relative; left: -100%
- width: 0; height: 0;
- 设置不显示:
display: none; - 隐藏:
visibility: hidden; - 透明度:
opacity: 0; - 将元素移动到视口之外( 定位, 负 margin, translate 平移).
- 元素元素高为 0.
- 翻转元素, 沿 X/Y 轴旋转到看不见:
transform: rotateY(90deg);/transform: rotateX(90deg);
Reacted by chengjufei and werty125- 设置不显示:
补充一个:
transform: skew(90deg, -90deg)display: nonevisibility： hiddenopacity: 0- 对应元素的 html 标签上添加 hidden 属性
width: 0; height: 0; overflow: hidden- 父元素
overflow: hidden，同时子元素margin-left: -100%，而且，这种情况有限制：- 子元素不能设置右浮动 ( margin 的方向与 float 的方向相反，就不起作用 )(我自己只试出来这种情况下不行)
- 如果子元素是内联元素或者 inline-block 元素，可以在父元素上设置
text-indent: -9999px使其超出屏幕范围，如果屏幕需要左右滑动，那么最好在父元素上加一个overflow: hidden
暂时就想到这么多
Reacted by abueavan23 remaining items
display:none;和visibility:hidden;
display:none;会让元素完全从文档树中消失，渲染时不占据任何空间。属于非继承属性。
Visibility:hidden;不会让元素从文档树中消失，会继续占据空间，只是内容不可见。属于继承属性。1.设置opacity透明度为0
2.设置visibility:hidden;
3.设置display:none；
4.设置宽或者高为0；
5.如果有与其他层级重叠，设置z-index
6.设置位置超出屏幕，如用text-indent，或者margin等总结：
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;影响布局
- visibility :hidden
- opacity : 0
- transform : scale(0)
- z-index:-99999999
不影响布局
- display : none
1.display:none;
会导致浏览器的重排重绘
2.overflow:hidden;
会导致浏览器的重绘
3.opacity:0;透明度设置为0
4.z-index:负值;将其被别的元素覆盖
5.position:absolution;移出可视区
6.transform:scale(0,0);缩小为0设置visibility:hidden
- 该属性会被继承
- 元素不脱标，导致浏览器重绘
- 点击事件点击不了
- 可以设置子元素visible，通过事件冒泡来点击
display:none
- 让元素不会被渲染，不占空间，脱标，引起重排重绘
tansform.scale(0)
- 和display效果一样
- 会引起重排和重绘
opacity:0
- 设置透明度为0，不脱标
- 可以使用点击事件
绝对定位+z-index
- 元素脱标，引起重绘和重排
- 使得元素被压在下方
绝对定位+负margin
- 元素脱标
- 元素只是不在视区
占位
- visibility: hidden
- opacity: 0 透明度设置为0
- transform: scale(0) 放大0倍
- margin-left: -100%
不占位
- display: none
- width: 0; height: 0; overflow: hidden
- display:none
- visibility:hidden
- 定位到屏幕外面
- z-index负
- opacity
- transform: scale(0)
- 宽高设为0
我来个骚的:
父元素：tranform-style:preserve-3d;
子元素：tranform:rotateY(-180deg);backface-visibility:hidden;
优点：骚；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)display:none;opaicty:0;- visiblity: hidden;
- position为absolute配合z-index:-9999；
display：none；opacity: 0;
display: none;
visibility: hidden;
opacity: 0;
给元素设置绝对定位，top或bottom设置9999px，left或right设置9999pxdisplay：none
不占用空间
opacity：0
透明但占用空间
visiblity:hidden
隐藏但占用空间
[css] 第3天 在页面上隐藏元素的方法有哪些？并简述出第一种方法的应用场景和优劣势。