显示与隐藏

1.display:none;

隐藏之后，不占位。display是dom级别的，可以重绘和渲染。

2.visibility:hidden;

隐藏之后占位。visibility不是dom级别的，不能重绘，只能渲染。

1.display:none;会触发reflow(回流),visibility:hidden;只会触发repaint(重绘)。
2.回流（reflow）：当render tree中的元素的宽高、布局、显示、隐藏或元素内部文字结结构发生改变时，会影响自身及其父元素、甚至追溯到更多的祖先元素发生改变，则会导致元素内部、周围甚至整个页面的重新渲染，导致页面发生重构，回流就产生了。
3.重绘（repaint）：元素的结构（宽高、布局、显示隐藏、内部文字大小）未发生改变，只是元素的外观样式发生改变，比如背景颜色、内部文字颜色、边框颜色等。此时会引起浏览器重绘，显然重绘的速度快于回流。

3.溢出隐藏：overflow:hidden;

应用: 单行文本溢出显示省略号

1. 设置宽度;
2. 设置不换行white-space:nowrap；
3. 设置溢出隐藏overflow:hidden;
4. 设置文本溢出显示省略号 text-overflow: ellipsis。