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