html+css基础题

运用CSS3动画需要用到什么规则？

要运用css3动画，需要运用@keyframes规则和animation属性

display: none和visibility:hidden的区别

display: none和visibility:hidden的区别是visibility:hidden会保留元素的空间

repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。

reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

display:none改变了dom的结构，所以产生了reflow visibility:hidden没有改变dom结构，触发repaint

所以display:none才会产生reflow

visibility:hidden只会出发repaint

iframe应用场景

iframe可用在以下几个场景中：

1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
2：ajax上传文件。
3：加载别的网站内容，例如google广告，网站流量分析。
4： 在上传图片时，不用flash实现无刷新。
5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。