浏览器标准模式和怪异模式之间的区别是什么
所谓的标准模式是指,浏览器按W3C标准解析执行代码;
怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。
浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,
会使浏览器使用相应的方式加载网页并显示,忽略DTD声明,将使网页进入怪异模式(quirks mode)。
什么是FOUC?如何避免FOUC?
什么叫做 FOUC 浏览器样式闪烁
如果使用import方法对css进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:
以无样式显示页面内容的瞬间闪烁,
这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.
原因大致为:
1,使用import方法导入样式表。
2,将样式表放在页面底部
3,有几个样式表,放在html结构的不同位置。
其实原理很清楚:当样式表晚于结构性html 加载,当加载到此样式表时,页面将停止之前的渲染。
此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。
解决方法:使用link标签将样式表放在文档head中
请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>css3实现幻灯片效果</title> <meta content="" name="description" /> <meta content="" name="author" /> <style type="text/css"> .cb-slideshow, .cb-slideshow:after{ position:fixed; 100%; height:100%; top:0; left:0; z-index:0; } .cb-slideshow li{ position:absolute; 100%; height:100%; top:0; left:0; background-size:cover;//背景图片铺满整个元素 background-position: center; background-repeat: none; opacity:0; z-index:0; -webkit-animation: loops 36s linear infinite 0s; } .cb-slideshow li:nth-child(1){ background-image: url(./images/1.jpg); } .cb-slideshow li:nth-child(2){ background-image: url(./images/2.jpg); -webkit-animation-delay: 6s; } .cb-slideshow li:nth-child(3){ background-image: url(./images/3.jpg); -webkit-animation-delay: 12s; } .cb-slideshow li:nth-child(4){ background-image: url(./images/4.jpg); -webkit-animation-delay: 18s; } .cb-slideshow li:nth-child(5){ background-image: url(./images/5.jpg); -webkit-animation-delay: 24s; } .cb-slideshow li:nth-child(6){ background-image: url(./images/3.jpg); -webkit-animation-delay: 30s; } @-webkit-keyframes "loops" { 0% { opacity: 0; /*transform:translateY(2000px); animation-timing-function:ease-in;*/ } 8% { opacity:1; /*transform:translateY(-30px); animation-timing-function: ease-out;*/ } 17% { opacity:1; } 25% { opacity:0.5; /*transform:translateY(10px);*/ } 100% { opacity: 0; /*transform:translateY(0);*/ } } </style> </head> <body> <ul class="cb-slideshow"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body>
undefined'变量和'undeclared'变量分别指什么
- undefined的是声明了但是没有赋值,javascript在使用该变量时不会报错. undeclared 是未声明也未赋值的变量,JavaScript访问会报错
闭包
闭包是指可以访问另一个函数作用域中的函数。