使元素不可见的旁门左道

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

展示属性

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

opacity:0; 也可以让元素不可见,同样是占据真实的页面布局位置。那么和visibility的区别是什么?

  • opacity不可见时仍然可以响应点击等操作事件,但是visibility不会。如果元素需要异步加载展示且能响应事件,最好用visibility控制。

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

结合overflow或者position

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

.xxx {
    position: absolute;
    left: 100%;
}

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

修改渲染模式

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的这几个变化中都有可以使元素不可见的方法。
比如

transform: scale(0);
或
transform: rotateY(90deg);

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



请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部