前端进阶试题

B浮动和负边距实现B浮动和负边距实现<divid="left">LeftSidebar</div><divid="content"〉<divid二"contentinner">MainContent</div></div><style>*{margin:0;padding:0;}#left{background-color:green;float:left;width:220px;margin-right:-100%;}#content{float:left;width:100%;}#contentInner{margin-left:220卩乂；/*二=等于左边栏宽度值二*/background-color:orange;}</style>一.css40分什么是盒模型？答：盒子是我们日常生活中的可装东西的箱子，它具有外边距margin，边框border，填充padding，装载内容content四个属性；css盒子模型将网页中的元素看作一个个盒子，然后使用css技术对这些盒子的属性进行设置、渲染，从而达到我们所希望的页面布局和渲染效果。Doctype的几种类型？答：doctype是documenttype（文档类型）简写，用来说明你用的XHTML或者HTML是什么版本。1）、在html4.01中有三种doctype，分别是：A、transitional宽松的模式，该DTD包含所有的元素和属性，包括展示性的和弃用的元素（如font）,不允许框架集（Framesets）。〈！D0CTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtmll-transitional.dtd"〉B、Strict严格的模式，该DTD包含所有的元素和属性，但不包括展示性的和弃用的元素（如font）,不允许框架集（Framesets）。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd">C、Frameset专门针对框架页面设计使用的DTD，等同于transitional模式，但不允许框架集（Framesets）。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN〃"/TR/xhtml1/DTD/xhtml1-framesets.dtd"〉html>2）、在html5中只有一种模式，就是〈!Doctypehtml>3）3.如何布局左不动右边自适应的两列布局？A左边浮动，右边加上一个margin-left值<divid="left">Leftsidebar</div><divid=*content”〉MainContent</div><style>*{margin:0;padding:0;}#left{float:left;width:220px;background-color:green;}#content{background-color:orange;margin-left:220px;/*二二等于左边栏宽度二*/}#left,#content{min-height:200px;height:auto!important;height:200px;}</style>4.如何布局两列等高?如何布局右侧定宽，左侧或中间自适应？A、左右固定，中间自适应〈styletype="text/css"〉body{padding:0;margin:0;}.body{padding:0220px0220px;}#container{background-color:#0ff;float:left;width:100%;border-left:220pxsolid#0f0;border-right:220pxsolid#f00;margin-left：-220px;margin-right:-220px;display:inline;/*SoIEplaysnice*/}#left{float:left;width:220px;margin-left：-220px;position:relative;}#content{float:left;width:100%;margin-right:-100%;}#right{float:right;width:220px;margin-right：-220px;position:relative;}</style>argin-right:200px;background:#F60;height:300px;margin-left:200px;}</style><divclass="body"><divid="container"><divid="content"〉MainContent</div><divid="left"〉LeftSidebar</div><divid="right"〉RightSidebar</div></div></div>如何布局三列自适应？gif,png,jpg的区别？GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中，gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位，而现如今随着互联网技术应用和硬件条件的提高，png和jpg格式的图片越来越多的被应用，gif昔日的辉煌一去不复。下面让我们来看看他们的区别：GIF(GraphicsInterchangeFormat)简介A、GIF图形交换格式是一种位图图形文件格式，以8位色(即256种颜色)重现真彩色的图像。它实际上是一种压缩文档，采用LZW压缩算法进行编码，有效地减少了图像文件在网络上传输的时间。它是目前广泛应用于网络传输的图像格式之一。优点：优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。可插入多帧，从而实现动画效果。可设置透明色以产生对象浮现于背景之上的效果。缺点：由于采用了8位压缩，最多只能处理256种颜色，故不宜应用于真彩图像。B、PNG（PortableNetworkGraphics）:便携式网络图片（PortableNetworkGraphics），简称PNG,是一种无损数据压缩位图图形文件格式。PNG格式是无损数据压缩的，允许使用类似于GIF格式的调色板技术，支持真彩色图像，并具备Alpha（半透明）等特性。现在有很多人使用PNG格式于互联网及其他方面上。PNG规范W3C建议（有了解更多详细理论方面知识，和具有探索精神的童鞋可以去看看抱歉是英文的）优点:*支持256色调色板技术以产生小体积文件*最高支持48位真彩色图像以及16位灰度图像。*支持Alpha通道的半透明特性。支持图像亮度的gamma校正信息。支持存储附加文本信息，以保留图像名称、作者、版权、创作时间、注释等信息。使用无损压缩。渐近显示和流式读写，适合在网络传输中快速显示预览效果后再展示全貌。*使用CRC循环冗余编码防止文件出错。*最新的PNG标准允许在一个文件内存储多幅图像。缺点:但也有一些软件不能使用适合的预测，而造成过分臃肿的PNG文件。C、JPG（JointPhotographicExpertsGroup）:JPEG是一种针对相片影像而广泛使用的一种失真压缩标准方法。JPEG的压缩方式通常是破坏性资料压缩（lossycompression），意即在压缩过程中图像的品质会遭受到可见的破坏。优点:JPEG/JFIF是最普遍在万维网（WorldWideWeb）上被用来储存和传输照片的格式。JPEG在色调及颜色平滑变化的相片或是写实绘画（painting）上可以达到它最佳的效果。在这种情况下，它通常比完全无失真方法作得更好，仍然可以产生非常好看的影像（事实上它会比其他一般的方法像是GIF产生更高品质的影像，因为GIF对于线条绘画（drawing）和图示的图形是无失真，但针对全彩影像则需要极困难的量化）。缺点:它并不适合于线条绘图（drawing）和其他文字或图示（iconic）的图形，因为它的压缩方法用在这些图形的型态上，会得到不适当的结果8.什么是csssprite?优缺点？A、CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat"‘“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样处理图片后，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。B、CSSSprites的优点:1、减少图片的字节2、减少了网页的http请求，从而大大的提高了页面的性能3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。C、CSSSprites的缺点:1、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；2、CSSSprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。10.制作细线表格？A、介绍了一个不常用属性：border-collapse:collapse;B、使用了一个属性缩写技巧：border:stylecolor;border-width:上右下左；〈styletype="text/css"media二"screen"〉<!--/*PR-CSS*/table{border-collapse:collapse;/*关键属性：合并表格内外边框其实表格边框有2px，外面lpx，里面还有lpx哦)*/border:solid#999;/*设置边框属性；样式solid=实线)、颜色(#999=灰)*/border-width:1px00lpx;/*设置边框状粗细：上右下左二对应：lpx001px*/}tableth,tabletd{border:solid#999;border-width:01px1px0;padding:2px;}tfoottd{text-align:center;}--></style><table><thead><tr><th>名称</th><th>网址</th><th>时间</th></tr></thead><tbody><tr><td>百度</td><td〉</td><td>2007.01.11</td></tr〉<tr><td>百度</td><td〉</td><td>2007.01.11</td></tr><tr><td>百度</td〉<td〉</td><td>2007.01.11</td></tr></tbody><tfoot><tr><tdcolspan="3">下一页</td></tr></tfoot></table>position:relative,absolute,fixed区别与联系？A、relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。B、absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位.C、fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。如何居中一个float:left的元素先margin-left:50%，在相对定位，向左移动元素宽度的一半position:relative;margin-left：-w/2.例如：<divclass=”left”></div>.left{width:500px;height:300px;float:left;margin-left:50%;position:relative;left：-250px;background-color:#CCC;}13.Cs在各浏览器下的兼容问题你通常是怎么来解决的，请分享你的经验；二.Js30分1).基础：parseInt与parseFloat的区别？A、parselnt()方法首先查看位置0处的字符，判断它是否是个有效数字；如果不是，该方法将返回NaN,不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置1处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时parselnt()将把该字符之前的字符串转换成数字。例如如果要把字符串"1234blue"转换成整数，那么parseInt()将返回1234，因为当它检测到字符b时，就会停止检测过程。parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的，所以要解析十六进制的值，当然，对二进制、八进制，甚至十进制(默认模式)，都可以这样调用parselnt()方法。如果十进制数包含前导0，那么最好采用基数10，这样才不会意外地得到八进制的值。B、parseFloat()与parselnt()方法的处理方式相似，从位置0开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换成数字。不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的，parseFloat()方法会把这个小数点之前的字符串转换成数字。这意味着字符串"22.34.5"将被解析成22.34。使用parseFloat()方法的另一不同之处在于，字符串必须以十进制形式表示浮点数，而不能用八进制形式或十六进制形式。该方法会忽略前导0，所以八进制数0908将被解析为908。对于十六进制数OxA，该方法将返回NaN，因为在浮点数中，x不是有效字符。此外，parseFloat()也没有基模式。valueof与toString的区别？valueOf()方法返回Array对象的原始值。toString()方法可把一个逻辑值转换为字符串，并返回结果。valueOf()对象返回值Array数组的元素被转换为字符串，这些字符串由逗号分隔，连接在一起。其操作与Array.toString和Array.join方法相同。Boolean为Boolean值。Date存储的时间是从1970年1月1日午夜开始计的毫秒数UTC。Function函数本身。Number数字值。Object对象本身。这是默认情况。String字符串值。toString()对象操作Array将Array的元素转换为字符串。结果字符串由逗号分隔，且连接起来。Boolean如果Boolean值是true，则返回“true”。否则，返回“false”。Date返回日期的文字表示法。Error返回一个包含相关错误消息的字符串。Function返回如下格式的字符串，其中functionname是被调用toString方法函数的名称：functionfunctionname(){［nativecode］}Number返回数字的文字表示。String返回String对象的值。默认返回“［objectobjectname］”，其中objectname是对象类型的名称。全等与相等？先说===，这个比较简单。下面的规则用来判断两个值是否===相等：1、如果类型不同，就［不相等］2、如果两个都是数值，并且是同一个值，那么［相等］;(!例外)的是，如果其中至少一个是NaN，那么［不相等］。(判断一个值是否是NaN，只能用isNaN()来判断)3、如果两个都是字符串，每个位置的字符都一样，那么［相等］;否则［不相等］。4、如果两个值都是true，或者都是false，那么［相等］。5、如果两个值都引用同一个对象或函数，那么［相等］;否则［不相等］。6、如果两个值都是null，或者都是undefined，那么［相等］。再说==，根据以下规则：1、如果两个值类型相同，进行===比较。2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：a、如果一个是null、一个是undefined，那么［相等］。b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。c、如果任一值是true，把它转换成1再比较；如果任一值是false，把它转换成0再比较。d、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。非js核心的对象，令说(比较麻烦，我也不大懂)e、任何其他组合，都［不相等］。举例："1"==true类型不等，true会先转换成数值1,现在变成"1"==1,再把"1"转换成1,比较1==1，相等。=赋值运算符==等于===严格等于例：vara=3;varb="3";a==b返回truea===b返回false因为a,b的类型不一样===用来进行严格的比较判断按照我的理解就是说他比==更加严格，因为javascript是弱类型的所以很多对象就算是类型不一样而值一样的时候，作=的话就会是相等的，但是如果用===他们就是不相等的。break与continue的区别？1、return语句的作用(1)return从当前的方法中退出,返回到该调用的方法的语句处,继续执行。return返回一个值给调用该方法的语句，返回值的数据类型必须与方法的声明中的返回值的类型一致，可以使用强制类型转换来是数据类型一致。return当方法说明中用void声明返回类型为空时，应使用这种格式，不返回任何值。2、break语句的作用(1)只能在循环体内和switch语句体内使用break语句。(2)当break出现在循环体中的switch语句体内时，其作用只是跳出该switch语句体。(3)当break出现在循环体中，但并不在switch语句体内时，则在执行break后，跳出本层循环体。在循环结构中，应用break语句使流程跳出本层循环体，从而提前结束本层循环。3、continue语句作用continue语句的一般形式为：contonue;其作用是结束本次循环，即跳过本次循环体中余下尚未执行的语句，接着再一次进行循环的条件判定。注意：执行continue语句并没有使整个循环终止。在while和do-while循环中，continue语句使得流程直接跳到循环控制条件的测试部分，然后决定循环是否继续进行。在for循环中，遇到continue后，跳过循环体中余下的语句，而去对for语句中的“表达式3”求值，然后进行“表达式2”的条件测试，最后根据“表达式2”的值来决定for循环是否执行。在循环体内，不论continue是作为何种语句中的语句成分，都将按上述功能执行，这点与break有所不同。js的作用域？Array的slice与splice的区别？定义splice()方法用于插入、删除或替换数组的元素。slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。用法splice的参数：splice(start,deleteCount,[item1[,item2[,...[,itemN]]]])数组从start下标开始，删除deleteCount个元素，并且可以在这个位置开始添加n个元素当start,deleteCount均为0的时候，也就是在数组的最前面插入新的元素。当参数只有start，deleteCount就是从start下标开始删除deleteCount个数组的元素，当参数只有start参数时，就是删除从start下标起至最后的元素当参数为负的时则该参数规定的是从数组元素的尾部开始算起的位置(-1指的是数组中倒数第一个元素，-2指的是，数组中倒数第二个元素。)slice参数：slice(start，end)；slice方法，在string对象和array对象的用法上类似。对于数组对象来说，slice方法提取从start下标起以end下标为结尾的一段元素(但不包括end下标的元素)，然后返回新的数组，对原数组没有任何是影响，当参数为负时则该参数是从数组的末尾索引开始算起，(-1指的是数组中倒数第一个元素，-2指的是，数组中倒数第二个元素。)当参数为一个参数，当为一个参数时，提取是以start下标起至末尾的部分元素。当start为0时，等于说是克隆一个新的数组，克隆后两个数组进行各自的操作，都互不影响，varclone=array.slice(0)；当然克隆数组还有其他办法借用concat()函数进行数组的复制：concat()用于进行数组的合并。使用语法为:arrayObject.concat(arrayX,arrayX,,arrayX)concat()用于多个数组的合并，但是返回的结果是一个新的数组，而不再引用用于合并的任何一个数组。可以利用它的这个特性来用一个数组连接空数组或直接不传参数完成clone的功能.varclone=array.concat();8.正则中test与match的区别？正则表达式中test、exec、match方法区别testtest返回Boolean，查找对应的字符串中是否存在模式。varstr="1a1b1c";varreg=newRegExp("1.","");alert(reg.test(str));//trueexecexec查找并返回当前的匹配结果，并以数组的形式返回。varstr="1a1b1c";varreg=newRegExp("1.","");vararr=reg.exec(str);如果不存在模式，则arr为null,否则arr总是一个长度为1的数组，其值就是当前匹配项。arr还有三个属性：index当前匹配项的位置；lastindex当前匹配项结束的位置(index+当前匹配项的长度)；input如上示例中input就是str。exec方法受参数g的影响。若指定了g,则下次调用exec时，会从上个匹配的lastindex开始查找。varstr="1a1b1c";varreg=newRegExp("1.","");alert(reg.exec(str)[0]);alert(reg.exec(str)[0]);上述两个输出都是1a。现在再看看指定参数g：varstr="1a1b1c";varreg=newRegExp("1.","g");alert(reg.exec(str)[0]);alert(reg.exec(str)[0]);上述第一个输出1a,第二个输出1b。matchmatch是String对象的一个方法。varstr="1a1b1c";varreg=newRegExp("1.","");alert(str.match(reg));match这个方法有点像exec，但：exec是RegExp对象的方法；math是String对象的方法。二者还有一个不同点,就是对参数g的解释。如果指定了参数g,那么match一次返回所有的结果。varstr="1a1b1c";varreg=newRegExp("1.","g");alert(str.match(reg));//alert(str.match(reg));//此句同上句的结果是一样的此结果为一个数组,有三个元素,分别是：1a、1b、1c。JavaScript中经常用到正则表达式，而正则表达式中经常用到Match和Test这两个函数，当然还有Exec.这里以代码实例来区分它们之间的不同吧.MatchExamplevarstr="ABCDEFGHiJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";varregexp=/[A-E]/gi;varrs=str.match(regexp);//rs=Array('A'，'B'，'C'，'D'，'E'，'a'，'b'，'c'，'d'，'e');TestExamplevarstr="ABCDEFGHiJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";varregexp=/[A-E]/gi;varrs=regexp.test(str);//rs=true;booleanExcExamplevarstr="ABCDEFGHiJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";varregexp=/[A-E]/gi;varrs;while((rs=regexp.exec(str))!=null){document.write(rs);document.write(regexp.lastindex);document.write("<br/>");}OUTPUTA1B2C3D4E5a27b28c29d30e31AnotherExcExamplevarregexp=/ab*/g;varstr="abbcdefabh";varrs;while((rs=regexp.exec(str))!=null){document.write(rs);document.write(regexp.lastIndex);document.write("<br/>");}OUTPUTabb3ab9如何在js中创建一个对象并继承他？functionPerson(name){=name;}Ptotype={constructor:Person,//强制声明构造函数，默认是ObjectsayName:function(){alert();}}varPersonl=newPerson("king");什么是prototype?什么是原型链？在JavaScript中,一共有两种类型的值，原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型•原型的值可以是一个对象，也可以是null•如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链，我们称之为原型链.setTimeout与setinterval的区别？setTimeout和setIntelval都有定时的功能！！！取消定时功能的时候，都有对应的clearTimeout以及clearinterval与之对应。但是他们之间是有区别的！setTimeou