前端学堂
学有所用

使元素不可见的旁门左道

最近有人问我如何使一个元素不可见,css中有哪些方法。当时我就随口说了7-8种常用的方法,其实还有很多,可以说是应该几十种方法吧。这里索性就总结一下,权当是对于知识点的总结与回顾。突然间发现这种学习知识的方法也很好,穿插交替。

使元素不可见的旁门左道

展示属性

visibility: hidden 和 display: none 都可以实现隐藏元素,唯一的区别是盒模型和页面布局的不同。visibility 的元素还是占据真实的页面布局位置,只是不可见。而display:none 的元素则会直接脱离文档流。

修改z-index也可以使元素不可见,z-index比较小的时候就相当于是展示在页面的最底层,会被其他的元素遮挡住,所以也可以不可见。

结合overflow或者position

这种做法使元素不在可视区域内展示,比如:

1
2
3
4
5
6
position: relative;
left:-100%;
或者:
text-indent: 100%;
overflow: hidden;
white-space: nowrap;

这种都是将元素展示在不可见区域。

修改渲染模式

opacity 和 width或height, 设置不透明度为0,或者 width 为0,height为0 都可以使元素渲染的时候不可见。但是一般不建议修改width和height,因为这样可能会引起页面回流和重绘。
对于行内元素,还可以使用font-size=0的方式使得文本不可见。这种一般用在块元素嵌套行内元素时去除空格影响文本的展示。

css3的一些方法

css3总比较常用transform来实现一些特效。常用的有translate(位移变化,可以触发GPU渲染加速),scale(缩放处理),rotate(旋转),skew(倾斜转换)。
顺便说一下开启gpu加速的一些方法:
1,html5 video,bing首页动态背景使用video的原因之一吧。
2,transition 和 animation(在ipad上使用会开启gpu加速)。
3,-webkit-transform-style:preserve-3d; -webkit-transform: translate3d(0,0,0); 。
4,给元素transform加上translateZ(0px),iScroll采用的方法。
按照上述方法开启gpu加速后,涉及到的区域就会被gpu直接渲染在屏幕对应区域,不用和浏览器进程共享内存和减轻cpu负担是gpu加速的理论原理。

浏览器解析展示html页面的时候,html在浏览器中会被转化为DOM树,DOM树的每一个节点都会转化为RenderObject, 多个RenderObject可能又会对应一个或多个RenderLayer。浏览器渲染的流程如下:

1.获取 DOM 并将其分割为多个层(RenderLayer)
2.将每个层栅格化,并独立的绘制进位图中
3.将这些位图作为纹理上传至 GPU
4.复合多个层来生成最终的屏幕图像(终极layer)。
这和游戏中的3D渲染类似,虽然我们看到的是一个立体的人物,但这个人物的皮肤是由不同的图片“贴”和“拼”上去的。网页比此还多了一个步骤,虽然最终的网页是由多个位图层合成的,但我们看到的只是一个复印版,最终只有一个层。当然有的层是无法拼合的,比如flash。

开启gpu加速后也会带来一些额外的问题,首要的应该是设备耗电量会增加,毕竟gpu也开始工作了。其次会出现一些渲染上面的问题,例如被加速部分元素z-index值和未被加速部分之间将无法正常比较。被加速元素如果有position定位的子元素,这些子元素有可能无法渲染到被加速元素以外的区域——left设置成-10000px都会渲染成0px。pc上有些显卡还会出现渲染bug,好在ipad上没这个问题。

当然先不说这么远,transform的这几个变化中都有可以使元素不可见的方法。
比如

1
2
3
transform:rotateX(90deg);
transform:rotateY(90deg);
transform:rotateZ(90deg)

通过绕X轴或Y轴或Z轴旋转都可以使得元素不可见。同理位移, 缩放,倾斜也可以,

1
2
3
4
5
transform:translateX(-1000px);
transform:scale(0);
transform:skew(90deg);

谢谢!

转载请注明出处://fed123.oss-ap-southeast-2.aliyuncs.com/2017/05/04/2017_hide_element/
欢迎关注皓眸学问公众号(扫描左侧二维码),每天好文、新技术!任何学习疑问或者工作问题都可以给我留言、互动。T_T 皓眸大前端开发学习 T_T

赞(0) 打赏
未经允许不得转载:前端学堂 » 使元素不可见的旁门左道

评论 抢沙发

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏