前端基础考试
一. css 40分
1. 什么是盒模型？
在网页布局中，为了让使各元素合理的组织，总结出来的一套原则和规范。盒模型由content（内容）、border（边框）、padding（内边距）、margin（外边距）组成。一个盒子实际占用空间是“内容+内边距+外边距+边框”组成。所有的网页元素都能看成一个盒子。
详细解释为：左---中---右
盒状模型宽度=左margin宽度+左border宽度+左padding宽度+content宽度+右padding宽度+右border宽度+右margin宽度
2. Doctype的几种类型？
DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本，分别有：
过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
3. 如何布局左不动右边自适应的两列布局？
方法一：高度100%，左边float，右边自动宽度（会自动占满剩余宽度）浮动布局
这种方法采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果#left{width:220px;float:left} #content{margin-left:220px;}
方法二：绝对定位absolute，使用方法一的html结构，左侧绝对定位，拉出文档流，高度100%并设成一定宽度200px。右侧自动宽度（将占100%），并设置margin-left：100px。
方法三：右侧宽高均为100%，左侧部分float，使左侧部分被包含到右侧部分。若左侧部分设有高度，则右侧部分内容超出此高度时，其内容将会出现在左侧部分下方。
http://changfeng-liu.blog.163.com/blog/static/21046518420128645553217/
4. 如何布局两列等高？
利用padding-bottom的正值与margin-bottom的负值相互抵消即可，同时最外层设置overflow:hidden;（http://blog.sina.com.cn/s/blog_7f95e24b0101btzb.html）
事先通过正内边距来使其拥有足够 高度，然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏，我们可以隐藏掉事先占据的足够高的空间。
由两列实际的内容高度来决定整个父元素的高 度，从而实现了等高
5. 如何布局右侧定宽，左侧或中间自适应？
右侧使用绝对定位。左边和中间可以采用margin-left和margin-right。（http://www.2cto.com/kf/201312/266639.html）
6. 如何布局三列自适应？
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Author" content="飘零雾雨|edzmaster@gmail.com" /> 7 <style type="text/css"> 8 body { 9 margin: 0; 10 font-size: 12px; 11 font-family: Verdana, Arial; 12 13 } 14 div { 15 overflow: hidden; 16 } 17 h1,h3,p { 18 margin: 0; 19 } 20 #dybody { 21 width: 777px; 22 margin: 0 auto; 23 24 } 25 #dyhead,#dyfoot { 26 background-color: #bbb; 27 } 28 #dymid { 29 width: 777px; 30 float: left; 31 } 32 .dycenter { 33 width: 497px; 34 background-color: #eee; 35 } 36 .dyleft,.dyright { 37 width: 140px; 38 background-color: #E7DFD3; 39 } 40 .dyleft,.dycenter,.dyright { 41 padding-bottom: 32767px; /*使得各列都向下撑开32767像素*/ 42 margin-bottom: -32767px; /*使得div的overflow发挥作用*/ 43 float: left; 44 } 45 #dyfoot { 46 clear: both; 47 } 48 </style> 49 <title>DY CSS Layout 三行三列之高度自适应</title> 50 </head> 51 <body> 52 <div id="dybody"> 53 <div id="dyhead"> 54 <h1>Head</h1> 55 <h1>Head</h1> 56 <h1>Head</h1> 57 </div> 58 59 <div id="dymid"> 60 <div class="dyleft"> 61 <h3>Left</h3> 62 <p>leftpart<br />leftpart</p> 63 </div> 64 <div class="dycenter"> 65 <h3>Center</h3> 66 <h3>Center</h3> 67 <h3>Center</h3> 68 <h3>Center</h3> 69 <h3>Center</h3> 70 <h3>Center</h3> 71 <p>centerpart<br />centerpart<br />centerpart<br />centerpart</p> 72 </div> 73 <div class="dyright"> 74 <h3>Right</h3> 75 <p>rightpart</p> 76 </div> 77 </div> 78 79 <div id="dyfoot"> 80 <h1>Footer</h1> 81 <h1>Footer</h1> 82 <h1>Footer</h1> 83 <h1>Footer</h1> 84 <h1>Footer</h1> 85 <h1>Footer</h1> 86 <h1>Footer</h1> 87 <h1>Footer</h1> 88 <h1>Footer</h1> 89 <h1>Footer</h1> 90 </div> 91 92 </div> 93 </body> 94 </html>
见测试题（群共享）
利用padding-bottom的正值与margin-bottom的负值相互抵消即可，同时最外层设置overflow:hidden;
这里只有一个地方需要说明一下那就是.dyleft,.dycenter,.dyright三列都用了padding-bottom和margin-bottom。这里首先将padding-bottom设置为足够长，作用是将三列向下撑开足够长（一般的页面都不会这么长）；而margin-bottom设置为负数则是为了互补刚才的padding-bottom设置，由于所有的div都被设置了overflow:hidden，所以left，center，right三列被padding撑开且无内容的部分则会被hidden，而颜色则因为padding的原因保留着。这样就达到了视觉上的高度自适应效果。 （http://bbs.csdn.net/topics/110070945）
7. gif,png,jpg的区别？
Gif格式：
最多使用256种色彩。最适合显示色调不连续或具有大面积单一颜色的图像。此外还包含透明区域和多帧动画。常用于卡通、导航条、logo、带有透明区域的图形和动画
Jpg格式：
支持数百万种色彩，主要用于显示照片等颜色丰富的精美图像，是有质量损耗的格式，压缩时会丢失一些数据，因而降低最终文件的质量。
Png格式：
既融合了gif格式透明显示的颜色，又具有jpg处理精美图像的优势，是逐渐流行的网络图像格式，但是目前浏览器对其支持不一致。
http://www.douban.com/note/48832314/
8. 什么是css sprite? 优缺点？
CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。 优点：①很好地减少了网页的http请求，从而大大的提高了页面的性能。② 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。③ 更换风格方便，只需要在一张或少张图片上修改图片的样式，整个页面的风格就可以改变，维护起来更加方便。
缺点：① 图片合并时，要把多张图片有序合理的合并成一张，最好留足够的空间，防止板块出现不必要的背景。在宽屏、高分辨率屏幕下的自适应页面，如果图片不够宽，很容易出现背景断裂。② 维护时较麻烦，若页面背景有少许改动，一般要改这张合并的图片。可能在原来的地方放不下，只能往下加图片，这样图片的字节会增加，还要改动css。
9.Class 与 id的区别？
class能被多次使用，而id是唯一的，只能使用一次。
10.. position:relative,absolute,fixed区别与联系？
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。http://www.jb51.net/web/77495.html
12. 如何居中一个float:left的元素
使用display：inline-block让文字在能够内联，再使用正常的居中样式来使其居中。overflow:hidden; /* 隐藏溢出的内容 */ vertical-align:middle; /* 行内垂直居中，针对 Opera 比较大的偏离 */ （http://wenda.haosou.com/q/1378209997062417?src=130）
②、把有float：left的相关代码定义在块中，使用相对定位或绝对定位把该块定位在中间。
13.伪类的使用有哪些，请举例并说明？（动态伪类，静态伪类，综合伪类）；
:link :visited是静态伪类属性。 :focus :hover :active是动态伪类属性。 ：hover可应用到任何元素。
:link用在未访问的连接上。
:visited用在已经访问过的连接上。
:active用于获得焦点(比如，被点击)的连接上。
:hover 用于鼠标光标置于其上的连接。
14. Css在各浏览器下的兼容问题你通常是怎么来解决的，请分享你的经验；
把一个程序在多个浏览器下运行，有些浏览器下页面会变得混乱不堪。我首先会选择升级浏览器。很多浏览器旧的版本不一定支持全部的css，一般而言新版本的浏览器能接受更多信息。升级后就能正常浏览页面了。如果还是不行，重新设置或者修改代码。
为了兼容不同的浏览器，我们需要在每个浏览器中进行测试，然后将每个浏览器中出现不兼容的代码用 if -else语句或者用 || 来把不同浏览器中的代码进行整合，这样来满足浏览器的兼容。
15.锚和链接的使用区别。
锚文本链接：在关键词加上URL链接，点击这个词，就去进入到链接的地址。
网址链接：在一个页面或者文章，留下一个网址，点击这个网址可以进入到该网站
从一个文本文档指向其它文本文档或从文本锚点指向某已命名位置的链接， 锚：添加锚点，<a name="header" id="header"></a> 然后在你需要这个锚点的时候引用 <a href="#header"></a> 就是这样的
二. Js 30分
1). 基础：
一：99%的代码必须封装在外部Javascript文件中。这些文件必须在 BODY 标签的尾部引入，让页面的性能最大化。
二：浏览器分辨率
除了适应各种浏览器，开发者还必须持续注意用户的屏幕分辨率。随着显示器屏幕越来越大，分辨率的广度也随之增加。下面是关于分辨率的一些工作准则。
1024px 分辨率
估算的折叠位置在 570px 处。
优化宽度： 960px - 在两侧留出合适的内边距，960可以被很多数字整除，而且能够很好地配合IAB 广告的标准宽度
增大宽度： 970px - 在大部分浏览器中还会留出一些内边距。 这个数字和 黄金比例 吻合得比较好
最大宽度： 996px - 在主流浏览器中还不会产生水平滚动条。 基于此处的研究 ，如果你不希望出现水平滚动条，宽度的最大值是 1003px。
- parseInt 与 parseFloat 的区别？
parseInt()方法首先查看位置0处的 字符，判断它是否是个有效数字；如果不是，该方法将返回NaN，不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置1处的字符，进行同样的 测试。这一过程将持续到发现非有效数字的字符为止，此时parseInt()将把该字符之前的字符串转换成数字。
parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。
基是由parseInt()方法的第二个参数指定的，所以要解析十六进制的值，当然，对二进制、八进制，甚至十进制（默认模式），都可以这样调用parseInt()方法。
与parseInt()方法的处理方式相似，从位置0开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字 符之前的字符串转换成数字。
不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看做无效的。parseFloat()方法会把这个小数点之前的字符串转换成数字。这意味着字符串 "22.34.5 "将被解析成22.34.使用parseFloat()方法的另一不同之处在于，字符串必须以十进制形式表示浮点数，而不能用八进制形式或十六进制形式。parseFloat()也没有基模式。（http://www.douban.com/note/374774603/）
2. valueof 与 toString 的区别？
valueOf() 方法可返回 Boolean 对象的原始值。如果调用该方法的对象不是 Boolean，则抛出异常 TypeError。
toString() 方法可把一个逻辑值转换为字符串，并返回结果。根据原始布尔值或者 booleanObject 对象的值返回字符串 "true" 或 "false"。
toString主要是把对象转换为字符串；
valueOf主要把对象转换成一个基本数据的值.
valueOf：偏向于运算。 toString：偏向于显示。
1、在进行对象转换时（例如:alert(a)）,将优先调用toString方法，如若没有重写toString将调用valueOf方法，如果两方法都不没有重写，但按Object的toString输出。
2、 在进行强转字符串类型时将优先调用toString方法，强转为数字时优先调用valueOf。
3、在有运算操作符的情况下，valueOf的优先级高于toString。
（http://blog.csdn.net/bbirdsky/article/details/8686201）
3. 全等与相等？
1,string,number,boolean等基础类型之间进行比较时
==比较：先将比较的两者转换为同一类型然后进行比较
===比较：不进行类型的转换，如果类型不同则直接返回false
2,Array,Object等高级类型之间进行比较
==和===一样比较两者的指针值是否相同
3,基础类型和高级类型进行比较
==比较：先将高级类型转换为基础类型然后进行比较
===比较：直接返回false
4，特例
null==undefined的返回值为true，然而在进行比较时null和undefined都不会转换为其它任何类型的值
项目经验总结：其实抓住一点总的准则相等比较时将进行数据类型的转换，而全等则不会进行数据类型的转换，只要数据类型不相同则直接返回false。
（http://www.2cto.com/kf/201402/278686.html）
4. break 与 continue 的区别？
break 语句可用于跳出循环。
break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：
continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。
（http://www.w3school.com.cn/js/js_break.asp） 5. js的作用域？
.js的作用域是有函数划分的，而不是块儿。
所有属于全局作用域的变量都是window对象的属性。
（http://www.cnblogs.com/qixuejia/archive/2009/12/18/1626951.html）
JS中变量申明分显式申明和隐式申明。
var i=100;//显式申明
i=100;//隐式申明
在函数中使用var关键字进行显式申明的变量是做为局部变量，而没有用var关键字，使用直接赋值方式声明的是全局变量。
当我们使用访问一个没有声明的变量时，JS会报错。而当我们给一个没有声明的变量赋值时，JS不会报错，相反它会认为我们是要隐式申明一个全局变量。
当JS解析器执行时，首先就会在执行环境里构建一个全局对象，我们定义的全局属性就是做为该对象的属性读取，在顶层代码中我们使用this关键字和window对象都可以访问到它。而函数体中的局部变量只在函数执行时生成的调用对象中存在，函数执行完毕时局部变量即刻销毁。
（http://www.cnblogs.com/terryglp/articles/1776695.html）
2). 提高：30分
1. 请向一位60岁的老奶奶解释一下什么是对象？什么是类？
对象是一个实体，例如一台具体存在的、拥有外形、声音的电视机。
类是同种对象的集合。如黑白电视机、彩电、液晶电视就是电视机的集合。
2.请用js写一个新闻选项卡
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>新闻选项卡</title> 6 <style type="text/css"> 7 div{ 8 width: 190px;height: 250px; 9 background: gray; display: none; 10 } 11 .active{ 12 background: yellow; 13 } 14 </style> 15 <script type="text/javascript"> 16 17 function myall(){ 18 19 var myall=document.getElementsByTagName('input'); 20 var mydiv=document.getElementsByTagName('div'); 21 22 for(var i=0;i<myall.length;i++) 23 { 24 myall[i].index=i;//设置索引 25 myall[i].onmouseover=function() 26 { 27 for(i=0;i<myall.length;i++) 28 { 29 myall[i].className =''; 30 mydiv[i].style.display='none'; 31 } 32 33 this.className='active';//this 指当前发生的事件； 34 mydiv[this.index].style.display='block'; 35 } 36 } 37 38 39 } 40 </script> 41 </head> 42 <body onload="myall()"> 43 44 <input type="button" value="娱乐" id="my1"> 45 <input type="button" value="政治" id="my2"> 46 <input type="button" value="汽车" id="my3"> 47 <input type="button" value="游戏" id="my4"> 48 <input type="button" value="购物" id="my5"> 49 50 51 52 <div style="display:block">娱乐娱乐娱乐</div> 53 <div >政治政治政治</div> 54 <div >汽车汽车汽车</div> 55 <div >游戏游戏游戏</div> 56 <div >购物购物购物</div> 57 58 </body> 59 </html>
3.用js写一个3s倒计时,然后自动跳转到http://www.baidu.com
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>鍊掕鏃?/title> 6 <style type="text/css"> 7 #lb{font-size:300px;font-weight:3;color:#FF0000; 8 margin-left:auto;margin-right:auto; 9 10 11 } 12 13 </style> 14 <script type="text/javascript"> 15 var i=4; 16 var op=true; 17 function showtime() 18 { 19 var mys=document.getElementById("lb"); 20 if(op) 21 { mys.innerHTML=mys.innerHTML*1-1; 22 setTimeout("showtime()",1000); } 23 if(mys.innerHTML==0) 24 { op=false; 25 window.location.href="http://www.baidu.com"} 26 27 } 28 29 </script> 30 31 </head> 32 33 <body onload="showtime()"> 34 35 <div id="lb"align="center">4</div> 36 </body> 37 </html>
<script type="text/javascript">
function delayURL(url, time) {
setTimeout("top.location.href='" + url + "'", time);
}
</script>
<span id="time" style="background: red">3</span>
3/*秒钟之后自动跳转，如果不跳转，请点击下面链接*/
<a href="http://www.baidu.com ">目标页面</a>
<script type="text/javascript">
delayURL("http://www.ablanxue.com", 3000);
</script>
（http://www.ablanxue.com/prone_3100_1.html）
4.请说出市场上主流的浏览器以及内核？ 常见的浏览器内核可以分为四种：Trient\Gecko\Presto\Webkit.
（1）Trident
Trident（又称为MSHTML），是微软的Windows搭载的网页浏览器——Internet Explorer浏览器使用的内核（俗称IE内核），该内核程序在1997年的IE 4中首次被采用，之后不断地加入新的技术并随着新版本的IE发布。Trident实际上是一款开放的内核，Trident引擎被设计成一个软件组件（模块），使得其他软件开发人员很容易将网页浏览功能加到他们自行开发的应用程序里，其接口内核设计相当成熟，因此才涌现出许多采用IE内核而非IE的浏览器（如Maxthon、The World、腾讯的TT、GreenBrowser等），但是Trident只能用于Windwos平台。
由于IE本身的“垄断性”而使得Trident内核在很长时间内都是一家独大，微软也在相当长一段时间内都没有更新Trident内核，这就导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节；二是Trident内核的大量Bug等安全性问题没有得到及时解决。目前，微软对Trident排版引擎做了重大变动，除了加入新的技术之外，还增加了对网页标准的支持。尽管这些变动已经在相当大的程度上落后了其他的排版引擎，如Gecko、WebCore、KHTML及Presto。
（2）Gecko
Gecko是开放源代码、以C++编写的网页排版引擎，目前被Mozilla家族网页浏览器以及Netscape 6以后版本浏览器所使用。这款软件原本是由网景通讯公司开发的，现在则由Mozilla基金会维护。由于Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，采用Gecko内核的浏览器也很多，这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。
Gecko排版引擎提供了一个丰富的程序界面以供与互联网相关的应用程序使用，例如网页浏览器、HTML编辑器、客户端/服务器等。虽然最初的主要对象是Mozilla的衍生产品，如Netscape和Mozilla Firefox，但是现在已有很多其他软件利用这个排版引擎。此外Gecko也是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用。
Gecko是最流行的排版引擎之一，其流行程度仅次于Trident。使用Gecko引擎的浏览器有Firefox、网景6～9、SeaMonkey、Camino、Mozilla、Flock、Galeon、K-Meleon、Minimo、Sleipni、Songbird、XeroBank。Google Gadget引擎采用的就是Gecko浏览器引擎。
（3）Presto
Presto是一个由Opera Software开发的浏览器排版引擎，目前Opera 7.0～10.00版本使用该款引擎。Presto的特点就是渲染速度的优化达到了极致，它是目前公认的网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。
Presto实际上是一个动态内核，与Trident、Gecko等内核的最大区别就在于脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行JavaScript时有着最快的速度，根据同等条件下的测试，Presto内核执行同等JavaScript所需的时间仅有Trident和Gecko内核的约1/3。不过，不足之处在于Presto是商业引擎，使用Presto的除了Opera以外，只剩下NDS Browser、Nokia 770网络浏览器等，这在很大程度上限制了Presto的发展。
Opera Widget引擎采用的就是Presto引擎。
（4）WebKit
WebKit 是一个开放源代码的浏览器引擎（Web Browser Engine），WebKit最初的代码来自KDE的KHTML和KJS（它们均为开放源代码，都是自由软件，在GPL协议下授权）。所以WebKit也是自由软件，同时开放源代码。
除了Safari浏览器，Mac下还有OmniWeb、Shiira等人气很高的浏览器。Google的chrome也使用WebKit作为内核。
WebKit内核在手机上的应用也十分广泛，例如Google的Android平台浏览器、Apple的iPhone浏览器、Nokia S60浏览器等所使用的浏览器内核引擎，都是基于WebKit引擎的。
WebKit内核也广泛应用于Widget引擎产品，包括中国移动的BAE、Apple的Dashboard以及Nokia WRT在内采用的均为WebKit引擎。
