CSS的隐藏方式

display:none和visibility:hidden的区别

// 一、空间占据
display:none;// 隐藏的元素不占文档流
visibility:hidden;// 隐藏的元素空间存在(占茅坑、不拉屎)
// 二、回流和重绘(reflow/repaint)
display:none;// 引起回流和重绘
visibility:hidden;// 无回流和重绘
// 三、株连九族
display:none;// 其内的标签元素所有隐藏、不管如何挣扎都无济于事
visibility:hidden;// 其元素若添加visibility:visible;则会显示出来

height:0;overflow:hidden;

overflow:hidden;// 溢出隐藏
//若父级被添加了position属性、子级内添加了绝对定位、则不会被隐藏
//火星人在地球触发了法律，若是火星人的老爸在这法律以外，则这个火星人啥事没有；不然，坐牢！

position:absolute;top:-999em;// 不占空间、没法点击
position:relative;top:-999em;// 占空间、没法点击
position:absolute;visibility:hidden;// 不占空间、没法点击
opacity:0;filter:Alpha(opacity=0);// 占空间、能够点击

那些缘由引发浏览器的回流

1. 改变字体大小

2. 样式表改动

3. DOM操做

4. CSS伪类

5. 元素内容变化、尤为是输入控件

6. 调整窗口大小( resize )

7. width、clientWidth(内容可视区大小)、offsetWidth(border+clientWidth)、scrollTop/scrollHeight(元素内容高度/包括溢出内容)

会使浏览器将渐进回流队列Flush、当即执行回流
如何减小页面回流

• 避免逐项更改样式、最好一次性更改style属性cssText、或者定义class一次性添加className

• 避免循环操做DOM、建立一个documentFragment或div在上面应用全部DOM操做、最后在添加到指定的元素中

也能够在一个display:none;的元素上进行操做、由于display:none;上的DOM操做不会引起回流(reflow)和重绘(repaints)

• 避免循环读取offsetLeft等属性、在循环以前把他们存储起来

• 进行复杂动画的元素运动时、使用绝对定位、使其脱离文档流。不然会引发父元素以及后续元素大量的回流