使元素不可见的旁门左道

最近有人问我如何使一个元素不可见，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轴旋转都可以使得元素不可见。同理位移, 缩放，倾斜也可以，