css元素隐藏

元素隐藏方法：

1.display:none;

2.opacity:0;

3.visibility:hidden;

4.position:absolute;left:无穷大

方法1,2,3的区别:

1.空间占据

　　display:none　　隐藏后不会占据额外的空间，但是它会产生回流和重绘

　　opacity:0,visibility:hidden　　隐藏后仍然会占据着空间，只会产生页面重绘

2.子元素继承

　　display:none　　不会被子元素继承，但是父元素已经消除了，子元素也就无法显示了

　　visibility:hidden　　会被子元素继承，可以通过设置子元素的visibility来显示

　　opacity:0　　会被子元素继承，但是不能通过设置子元素的opacity来显示

3.事件绑定

　　display:none　　元素已经不存在了，因此无法触发绑定的事件

　　visibility:hidden　　绑定的事件无法触发

　　opacity:0　　可以触发绑定的事件

4.过渡动画

　　transition对display是无效的

　　transition对visibility也是无效的

　　transition对opacity是有效的　　

拓展：回流和重绘

　　1.回流（重排）：回流是指浏览器为了重新渲染部分或者全部文档而重新计算文档中元素的位置和几何构造的过程，因为回流可能导致整个dom树的重新构造，所以会印象性能。

　　2.重绘：当元素的一部分属性发生改变，如外观、背景、颜色等一系列不会引起布局变化的改变，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观。

引起重排的场景和属性

1.添加、删除可见的dom

2.元素的位置改变

3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)

4.页面渲染初始化

5.浏览器窗口大小改变

6.设置style属性

7.改变文字大小

8.添加、删除样式表

9.激活伪类，如:hover

10.操作class属性

11.内容的改变（圆弧在输入框中写入内容也算）

减少重绘重排

（1）不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class，然后修改 DOM 的 className。

（2）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。

（3）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。

（4）千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)

（5）不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）

（6）用translate替代top改变

（7）用opacity替代visibility（在独立图层下优化重绘）