visibility:hidden；与display:none；的区别和渐进增强与优雅降级的区别

1.作用不同

visibility:hidden; 将元素隐藏，但是在网页中的位置不会被取缔。

display:none; 将元素的显示设为无，在网页中不占任何位置。

2.定义不同

visibility 属性指定一个元素是否可见的        

display 这个属性用于定义建立布局时元素生成的显示框类型  

visibility:hidden;        会触发重绘（repaint）

display:none;        会触发回流（reflow）

重绘不一定回流，回流一定重绘。

3.继承性不同

visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。如果给子元素重新给予元素设置visibility:visible;则子元素又会显示出来。

display不具有继承性。

4.支持transition不同

CSS3中的transition支持visibility属性，但是并不支持display。由于transition可以延迟执行，因此可以配合visibility使用纯CSS实现hover演示显示效果。提高用户体验。

什么是回流

当render tree中的一部分或全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流（reflow）。每个页面至少需要一次回流。

何时会发生回流？

1. 增删可见的DOM元素
2. 元素的位置和尺寸发生改变
3. 内容的多少发生变化
4. 当前浏览器的窗口进行缩放
5. 文档初次渲染

什么是重绘

当render tree中的一些元素需要更换属性，而这些属性仅仅影响风格，形状等，不影响布局，比如：color，font-weight等，这就是重绘。

重绘与回流的区别

重绘不一定回流，但回流一定重绘。

重绘只是样式进行了改变，结构不发生改变；

回流是结构进行了变化，还要进行重绘，代价相对于来说比较大。 

什么是渐进增强

 渐进增强就是针对低版本浏览器进行构建页面，它保证最基本的功能，再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

什么是优雅降序

 优雅降级是一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

渐进增强和优雅降级的区别 

优雅降级是先构建完整的功能，再考虑低版本的兼容问题，并试图减少用户体验的供给，而渐进增强是从低版本的兼容性开始，并不断扩充，以适应新环境的需要。

CSS书写顺序

1. 位置属性(position, top, right, z-index, display, float等)
2. 大小(width, height, padding, margin)
3. 文字系列(font, line-height, letter-spacing, color,text-align等)
4. 背景(background, border等)
5. 其他(animation, transition等)