【前端】常见前端开发面试题（题目篇）

最新推荐文章于 2024-07-30 16:49:30 发布

weixin_34265814

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量4.5k

点赞数

文章标签：前端 php 数据库 ViewUI

原文链接：https://my.oschina.net/maomi/blog/137811

版权

为什么80%的码农都做不了架构师？>>>

2013腾讯web前端实习生一面总结【转】

1、@：屏蔽错误信息。

2、php错误类型

error_reporting() 设置 PHP 的报错级别并返回当前级别。

//禁用错误报告

error_reporting(0);

E_ALL - 所有的错误和警告

E_ERROR - 致命性运行时错

E_WARNING - 运行时警告（非致命性错）

E_PARSE - 编译时解析错误

E_NOTICE - 运行时提醒(这些经常是是你的代码的bug引起的，

值	常量	描述
1	E_ERROR	Fatal run-time errors. Errors that can not be recovered from. Execution of the script is halted
2	E_WARNING	Non-fatal run-time errors. Execution of the script is not halted
4	E_PARSE	Compile-time parse errors. Parse errors should only be generated by the parser
8	E_NOTICE	Run-time notices. The script found something that might be an error, but could also happen when running a script normally
8191	E_ALL	All errors and warnings, except level E_STRICT (E_STRICT will be part of E_ALL as of PHP 6.0)

关闭错误：error_reporting(0);

报告指定的错误：error_reporting(E_ERROR | E_WARNING | E_PARSE);

报告除了^(仅指一个)指出的错误：error_reporting(E_ALL ^ E_NOTICE);

报告所有错误：error_reporting(E_ALL);或error_reporting(-1);

3、MVC模型

4、http请求：

304（未修改）：自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。

5、CI

CI优点：1、免费，开源。2、生成干净的url，对搜索引擎友好。3、可扩展的，可以自定义类库和辅助函数。4、不需要模板引擎。

6、php路由

php的路由机制

1、路由机制就是把某一个特定形式的URL结构中提炼出来系统对应的参数。举个例子,如：http://main.wopop.com/article/1 其中：/article/1 -> ?_m=article&id=1。

2、然后将拥有对应参数的URL转换成特定形式的URL结构，是上面的过程的逆向过程。

PHP的URL路由方式

总体来说就是：获取路径信息->处理路径信息

URL路由方式：

第一种是通过url参数进行映射的方式，一般是两个参数，分别代表控制器类和方法比如index.php?c=index&m=index映射到的是index控制器的index方法。

第二种，是通过url-rewrite的方式，这样的好处是可以实现对非php结尾的其他后缀进行映射，当然通过rewrite也可以实现第一种方式，不过纯使用rewrite的也比较常见，一般需要配置apache的rewrite规则

1. <IfModule mod_rewrite.c>

2. RewriteEngine On

3. RewriteBase /

4. RewriteRule ^index\.php$ - [L]

5. RewriteCond %{REQUEST_FILENAME} !-f

6. RewriteCond %{REQUEST_FILENAME} !-d

7. RewriteRule . /index.php [L]

8. </IfModule>

第三种，就是通过pathinfo的方式，所谓的pathinfo，就是形如这样的url。xxx.com/index.php/c/index/aa/cc，apache在处理这个url的时候会把index.php后面的部分输入到环境变量$_SERVER['PATH_INFO']，它等于/c/index/aa/cc。然后我们的路由器再通过解析这个串进行分析就可以了，后面的部分放入到参数什么地方的，就依据各个框架不同而不同了。

7、缓存

在WEB开发中，缓存可以分为：

1、数据库端缓存

“空间换时间”。比如建一个表来存储另外一个表某个类型的数据的总条数，在每次更新数据的时候同事更新数据表和统计条数的表。在需要获取某个类型的数据的条数的时候，就不需要select count去查询，直接查询统计表就可以了，这样可以提高查询的速度和数据库的性能。

2、应用层缓存

应用层缓存这块跟开发人员关系最大，也是平时经常接触的。

1.缓存数据库的查询结果,减少数据的压力。这个在大型网站是必须做的。

2.缓存磁盘文件的数据。比如常用的数据可以放到内存，不用每次都去读取磁盘，特别是密集计算的程序，比如中文分词的词库。

3.缓存某个耗时的计算操作，比如数据统计。

3、前端缓存

前端缓存可以理解为一般使用的cdn技术，利用squid等做前端缓冲技术，主要还是针对静态文件类型，比如图片，css,js,html等静态文件。

4、客户端缓存

客户端缓存依赖于浏览器的实现，目前一般的浏览器都实现了基于http都信息来缓存相应的文件。

php缓存

１、普遍缓存技术：

　　数据缓存：这里所说的数据缓存是指数据库查询PHP缓存机制，每次访问页面的时候,都会先检测相应的缓存数据是否存在，如果不存在，就连接数据库，得到数据，并把查询结果序列化后保存到文件中，以后同样的查询结果就直接从缓存表或文件中获得。

　２、页面缓存：

　　每次访问页面的时候，都会先检测相应的缓存页面文件是否存在，如果不存在，就连接数据库，得到数据，显示页面并同时生成缓存页面文件，这样下次访问的时候页面文件就发挥作用了。(模板引擎和网上常见的一些PHP缓存机制类通常有此功能)

３、时间触发缓存：

检查文件是否存在并且时间戳小于设置的过期时间,如果文件修改的时间戳比当前时间戳减去过期时间戳大，那么就用缓存，否则更新缓存。

４、内容触发缓存：

当插入数据或更新数据时，强制更新PHP缓存机制。

５、静态缓存：

　　这里所说的静态缓存是指静态化，直接生成HTML或XML等文本文件，有更新的时候重生成一次，适合于不太变化的页面，这就不说了。

６、内存缓存:

Memcached是高性能的，分布式的内存对象PHP缓存机制系统，用于在动态应用中减少数据库负载，提升访问速度。

8、浏览器缓存

最简单的方法是在头部加<meta>标签

<METAHTTP-EQUIV="Cache-Control" CONTENT="no-cache,no-store,must-revalidate">

<METAHTTP-EQUIV="pragma" CONTENT="no-cache">

<METAHTTP-EQUIV="expires" CONTENT="0">

<?php

header("Cache-control:no-cache,no-store,must-revalidate");

header("Pragma:no-cache");

header("Expires:0");

如果在<META HTTP-EQUIV=”Cache-Control” CONTENT=”no-cache,no-store, must-revalidate”>或header(“Cache-control:no-cache,no-store,must-revalidate”);中少了no-store就解决不了火狐的缓存了

9、php最大内存

memory_limit = 128M；

修改1、php.ini文件中

修改2：php文件中，ini_set('memory_limit','128M');

10、页面访问慢，如何解决？

先查找页面慢的原因，在解决，发现问题比解决问题更重要。

11、get与post

1.安全性get 请求的数据会显示在地址栏上, post请求的数据，放在http协议的消息体

2. 从可以提交数据的大小看.

2.1 http协议本身并没有限制数据大小.

2.2 浏览器在对get 和post请求做显示, get 请求数据 2k+35 ,post没有显示.

3. get请求可以更好的添加到收藏夹.

13、数组类型：

有三种数组类型：

1、数值数组:数值数组存储的每个元素都带有一个数字 ID 键。

$names =array("Peter","Quagmire","Joe");

2、关联数组（key=>value）：它的每个 ID 键都关联一个值。在存储有关具体命名的值的数据时，使用数值数组不是最好的做法。

通过关联数组，我们可以把值作为键，并向它们赋值

$ages = array("Peter"=>32,"Quagmire"=>30, "Joe"=>34);

3、多维数组：在多维数组中，主数组中的每个元素也是一个数组。在子数组中的每个元素也可以是数组

Array

(

[Griffin] => Array

(

[0] => Peter

[1]=> Lois

)

[Brown] => Array

(

[0] => Cleveland

[1] => Loretta

)

面试题是招聘公司和开发者都非常关心的话题，公司希望通过它了解开发者的真实水平和细节处理能力，而开发者希望能够最大程度地展示自己的水平（甚至超常发挥）。本文提供了众多前端开发面试题，无论是招聘方还是应聘方都值得一看！

一般问题

你用Twitter吗？（在天朝最好问你用微博吗？）

如果用，你都关注那些人？

你用Github吗？

如果用，你关注的项目有什么？

你关注的博客有那些？

你使用那些版本管理系统，比如Git，SVN等？

你常用的开发环境是怎样的？比如操作系统，文本编辑器，浏览器，及其他工具等。

你能描述一下你制作一个网页的工作流程吗？

你能描述一下渐进增强和优雅降级之间的不同吗?

如果提到了特性检测，可以加分。

请解释一下什么是语义化的HTML。

你更喜欢在哪个浏览器下进行开发？你使用那些开发人员工具？

你如何对网站的文件和资源进行优化？

期待的解决方案包括：

文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
其他

为什么利用多个域名来存储网站资源会更有效？

浏览器一次可以从一个域名下做多少资源？

请说出三种减低页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）

如果你接到了一个使用Tab来缩进代码的项目，但是你喜欢空格，你会怎么做？

建议这个项目使用像EditorConfig(http://editorconfig.org)之类的规范
为了保持一致性，转换成项目原有的风格
直接使用VIM的retab命令

请写一个简单的幻灯效果页面

如果不使用JS来完成，可以加分。

你都使用那些工作来测试代码的性能？

例如JSPerf (http://jsperf.com/)
例如Dromaeo (http://dromaeo.com/)
其它。

如果今年你打算熟练掌握一项新技术，那会是什么？

请谈一下你对网页标准和标准制定机构重要性的理解。

什么是FOUC？你如何来避免FOUC？

HTML相关问题

文档类型的作用是什么？你知道多少种文档类型？

浏览器标准模式和怪异模式之间的区别是什么？

使用XHTML的局限有那些？

如果页面使用'application/xhtml+xml'会有什么问题吗？

如果网页内容需要支持多语言，你会怎么做？

在设计和开发多语言网站时，有哪些问题你必须要考虑？

在HTML5的页面中可以使用XHTML的语法吗？

在HTML5中如何使用XML？

'data-'属性的作用是什么？

如果把HTML5看作做一个开放平台，那它的构建模块有那些？

请描述一下cookies，sessionStorage和localStorage的区别？

JS相关问题

你使用过那些Javascript库？

你是否研究过你所使用的JS库或者框架的源代码？

什么是哈希表？

'undefined'变量和'undeclared'变量分别指什么？

闭包是什么，如何使用它，为什么要使用它？

你喜欢的使用闭包的模式是什么？

请举出一个匿名函数的典型用例？

请解释什么是Javascript的模块模式，并举出实用实例。

如果有提到无污染的命名空间，可以考虑加分。
如果你的模块没有自己的命名空间会怎么样？

你如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？

请指出Javascript宿主对象和内置对象的区别？

指出下列代码的区别：

                                                                                                                                                                         function Person(){} var person = Person() var person = new Person()

'.call'和'.apply'的区别是什么？

请解释'Funciton.prototype.bind'的作用？

你如何优化自己的代码？

你能解释一下JavaScript中的继承是如何工作的吗？

在什么时候你会使用'document.write()'？

大多数生成的广告代码依旧使用'document.write()'，虽然这种用法会让人很不爽。

请指出浏览器特性检测，特性推断和浏览器UA字符串嗅探的区别？

请尽可能详尽的解释AJAX的工作原理。

请解释JSONP的工作原理，以及它为什么不是真正的AJAX。

你使用过JavaScript的模板系统吗？

如有使用做，请谈谈你都使用过那些类似库文件。比如Mustache.js,Handlebars等等。

请解释变量声明提升。

请描述下事件冒泡机制。

"attribute"和"property"的区别是什么？

为什么扩展JavaScript内置对象是个坏做法？

为什么扩展JavaScript内置对象是个好做法？

请指出document load和document ready的区别。(这是个问题的问题）

'=='和'==='有什么不同？

你如何获取浏览器URL中查询字符串中的参数。

请解释一下JavaScript的同源策略。

请解释一下事件代理。

请描述一下JavaScript的继承模式。

如何实现下列代码：

                                                                                                                                                                         [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

描述一种JavaScript memoization(避免重复运算)的策略。

什么是三元条件语句？

函数的参数元是什么？

什么是"use strict"?使用它的好处和坏处分别是什么？

JS代码示例：

                                                                                                                                                                         ~~3.14

问题：上面的语句的返回值是什么？答案：3

                                                                                                                                                                         "i'm a lasagna hog".split("").reverse().join("");

问题：上面的语句的返回值是什么？答案："goh angasal a m'i"

                                                                                                                                                                         ( window.foo || ( window.foo = "bar" ) );

问题：window.foo的值是什么？答案："bar" 只有window.foo为假时的才是上面答案，否则就是它本身的值。

                                                                                                                                                                         var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

问题：上面两个alert的结果是什么？答案: "Hello World" & ReferenceError: bar is not defined

                                                                                                                                                                         var foo = []; foo.push(1); foo.push(2);

问题：foo.length的值是什么？答案：'2'

                                                                                                                                                                         var foo = {}; foo.bar = 'hello';

问题：foo.length的值是什么？ **答案: undefined

jQuery相关问题

解释"chaining"。

解释"deferreds"。

你知道那些针对jQuery的优化方法。

请解释'.end()'的用途。

你如何给一个事件处理函数命名空间，为什么要这样做？

请说出你可以传递到jQuery方法的四种不同值。

选择器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。

什么是效果队列？

请指出'.get()','[]','eq()',的区别。

请指出'.bing()','.live()'和'.delegate()'的区别。

请指出'$'和'$.fn'的区别？或者说出'$.fn'的用户。

请优化下列选择器：

                                                                                                                                                                         $(".foo div#bar:eq(0)")

CSS相关问题

描述css reset的作用和用途。

描述下浮动和它的工作原理。

清除浮动的方法有那些，分别适用于什么情形。

解释css sprites,如何使用。

你最喜欢的图片替换方法是什么，你如何选择使用。

讨论CSS hacks，条件引用或者其他。

如何为有功能限制的浏览器提供网页。

你会使用那些技术和处理方法。

如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用。

你使用过网格系统吗？如果使用过，你最喜欢哪种？

你使用过meidia queries（媒体查询）吗，或者移动网站相关的CSS布局。

你熟悉SVG样式的书写吗？

如何优化网页的打印样式。

在书写高效CSS文件时会有哪些问题需要考虑。

你使用CSS预处理器吗？(SASS,Compass,Stylus,LESS)

如果使用，描述你的喜好。

你是否接触过使用非标准字体的设计？

字体服务，Google Webfonts, Typekit,等等。

请解释浏览器是如何根据CSS选择器选择对应元素的。

可选的有趣问题

你编写过的最酷的代码是什么？其中你最自豪的是什么？

你知道HTML5的帮派标志吗？

你是否正在或曾经在一艘船上。(不懂这个幽默）

你使用的开发工具中，你最喜欢的部分是什么？

你有什么业余项目吗？是那种类型的？

解释cornify的重要性？(本题完全摸不到头脑）

在一张纸上，垂直写下ABCDE，然后不用任何代码，将他们到序排列。

静静的看他们是否将纸反转。

海盗还是忍者？

如果是两者的合体，并有恰当理由，可以加分。如果是僵尸猴子海盗加忍者加两分。（注：此题文化差异过大）

如果没有在Web开发，你会做什么？

卡门圣迭哥的隐藏处在哪里？

提示：本题的答案永远是错的。

你最爱的IE特性是什么？

完句填空： Brendan Eich和Doug Crockford是JavaScript的________。

讨论：jQuery是牛逼的库还是最牛逼的库。

HTML5 JavaScript实现图片文字识别与提取

http://blog.csdn.net/coolanfei/article/details/11749833?reload

在线 Base64 编/解码小工具

http://www.planabc.net/2010/07/22/online_base64_encoding_or_decoding_tools/

阿里巴巴笔试题选解

小题：

1、有三个结点，可以构成多少种树形结构？

2、一副牌52张(去掉大小王)，从中抽取两张牌，一红一黑的概率是多少？

编程题：

3、设计一个最优算法来查找一n个元素数组中的最大值和最小值。已知一种需要比较2n次的方法，请给一个更优的算法。情特别注意优化时间复杂度的常数。

4、已知三个升序整数数组a[l], b[m]和c[n]。请在三个数组中各找一个元素，是的组成的三元组距离最小。三元组的距离定义是：假设a[i]、b[j]和c[k]是一个三元组，那么距离为:

Distance = max(|a[ I ] – b[ j ]|, |a[ I ] – c[ k ]|, |b[ j ] – c[ k ]|)

请设计一个求最小三元组距离的最优算法，并分析时间复杂度。

5、在黑板上写下50个数字：1至50.在接下来的49轮操作中，每次做如下动作：选取两个黑板上的数字a和b，擦去，在黑板上写|b - a|。请问最后一次动作之后剩下数字可能是什么？为什么？

题解：(题解非官方，仅供参考，有错误的地方望指正！谢谢)

1、有三个结点的，可以构成多少个种树形结构？

解：应该是5种；

2、一副牌52张(去掉大小王)，从中抽取两张牌，一红一黑的概率是多少？

考察概率论知识

解法一： 52张牌从中抽两张，就是 C(2,52)种情况，一红一黑是C(1,26) * C(1,26)种

　　　　P = [C(1,26) * C(1,26) ] / C(2,52) = 26 * 26 / (26 * 51) = 26/51

解法二：全为黑或者全为红是C(2,26)种情况，由于是黑和红两种，所以要乘以2

　　　　P = 1 - C(2,26) / C(2,52) - C(2,26) / C(2,52) = 1 - 2 * (26 * 25)/(51 * 52) = 1 - 25/51 = 26/51

解：把数组两两一对分组，如果数组元素个数为奇数，就最后单独分一个，然后分别对每一组的两个数比较，把小的放在左边，大的放在右边，这样遍历下来，总共比较的次数是 N/2 次；在前面分组的基础上，那么可以得到结论，最小值一定在每一组的左边部分找，最大值一定在数组的右边部分找，最大值和最小值的查找分别需要比较N/2 次和N/2 次；这样就可以找到最大值和最小值了，比较的次数为

　　　　　　N/2 * 3 = (3N)/2 次

如图会更加清晰：

代码实现：

[cpp] view plain copy

#include <stdio.h>
#include <stdlib.h>
#define N 7
int main()
{
int arr[N] = {4, 1, 5, 9, 9, 7, 10};
int iter = 0;
int cnt = 0;
for(iter = 0; iter < N ; iter += 2)
{
if(++cnt && arr[iter] > arr[iter + 1] )
{
int temp = arr[iter];
arr[iter] = arr[iter + 1];
arr[iter + 1] = temp;
}
}
int myMin = arr[0];
for(iter = 2; iter < N ; iter += 2)
{
if(++cnt && arr[iter] < myMin)
{
myMin = arr[iter];
}
}
int myMax = arr[1];
for(iter = 3; iter < N; iter += 2)
{
if(++cnt && arr[iter] > myMax)
{
myMax = arr[iter];
}
}
if(N % 2 != 0 && ++cnt && myMax < arr[N - 1]) myMax = arr[N - 1];
printf("min is %d\n", myMin);
printf("max is %d\n", myMax);
printf("compare times is %d", cnt);
return 0;
}

　　上面的算法比较次数基本上已经是最优了，但是有朋友提出这样的顾虑，在极端的情况下，每次都做交换，可能会导致程序开销很大，这样的顾虑是对的，其实在上面的算法的基础上，可以不做交换就能找到最大值和最小值。

第3题改进的算法：

　　依旧把数组两两一组分配，不做交换操作，设置一个最大值Max和最小值Min，依次和每一组的两个数据做比较，把较大的值给Max,较小的值给Min，遍历一次就能找到数组的最大值和最小值。

　　示例：数组为{(4, 1) , (5, 9) , (9 ,7) ,(10,2)},经过第一组比较得到Max = 4，Min = 1，其中比较了3次；,经过第二组比较得到Max = 9，Min = 1，其中比较了3次；……到最后Max = 10，Min = 1；比较次数是3 * N/2 = (3N)/2，比较次数没有改变！代码实现不难，就不贴了

Distance = max(|a[ I ] – b[ j ]|, |a[ I ] – c[ k ]|, |b[ j ] – c[ k ]|)

请设计一个求最小三元组距离的最优算法，并分析时间复杂度。

解：这道题目有两个关键点：

　　第一个关键点： max{|x1-x2|,|y1-y2|} =（|x1+y1-x2-y2|+|x1-y1-(x2-y2)|）/2 --公式（1）

　　我们假设x₁=a[ i ]，x₂=b[ j ]，x₃=c[ k ]，则

Distance = max(|x₁ – x₂|, |x₁ – x₃|, |x₂ – x₃|) = max( max(|x₁ – x₂|, |x₁ – x₃|) , |x₂ – x₃|) --公式（2）

　　根据公式（1），max(|x₁ – x₂|, |x₁ – x₃|) = 1/2 ( |2x₁ – x₂– x₃| + |x₂ – x₃|)，带入公式（2），得到

Distance = max( 1/2 ( |2x₁ – x₂– x₃| + |x₂ – x₃|) , |x₂ – x₃| )

　　　　　　=1/2 * max( |2x₁ – x₂– x₃| , |x₂ – x₃| ) + 1/2*|x₂ – x₃| //把相同部分1/2*|x₂ – x₃|分离出来

　　　　　　=1/2 * max( |2x₁ – (x₂ + x₃)| , |x₂ – x₃| ) + 1/2*|x₂ – x₃| //把(x₂ + x₃)看成一个整体，使用公式（1）

　　　　　　=1/2 * 1/2 *((|2x₁ – 2x₂| + |2x₁ – 2x₃|) + 1/2*|x₂ – x₃|

　　　　　　=1/2 *|x₁ – x₂| + 1/2 * |x₁ – x₃| + 1/2*|x₂ – x₃|

　　　　　　=1/2 *(|x₁ – x₂| + |x₁ – x₃| + |x₂ – x₃|) //求出来了等价公式，完毕！

　　第二个关键点：如何找到(|x₁ – x₂| + |x₁ – x₃| + |x₂ – x₃|) 的最小值，x₁，x₂，x₃，分别是三个数组中的任意一个数，这一题，我只是做到了上面的推导，后面的算法设计是由csdn上的两个朋友想出来的方法，他们的CSDN的ID分别为 “云梦泽” 和 “ shuyechengying”.

算法思想是：

　　用三个指针分别指向a,b,c中最小的数，计算一次他们最大距离的Distance ，然后在移动三个数中较小的数组指针，再计算一次，每次移动一个，直到其中一个数组结束为止，最慢(l+ m + n)次，复杂度为O(l+ m + n)

代码如下：

[cpp] view plain copy

#include <stdio.h>
#include <stdlib.h>
#include <math.h>
#define l 3
#define m 4
#define n 6
int Mymin(int a, int b, int c)
{
int Min = a < b ? a : b;
Min = Min < c ? Min : c;
return Min;
}
int Solvingviolence(int a[], int b[], int c[])
{
//暴力解法，大家都会，不用过多介绍了！
int i = 0, j = 0, k = 0;
int MinSum = (abs(a[i] - b[j]) + abs(a[i] - c[k]) + abs(b[j] - c[k])) / 2;
// int store[3] = {0};
int Sum = 0;
for(i = 0; i < l; i++)
{
for(j = 0; j < m; j++)
{
for(k = 0; k < n; k++)
{
Sum = (abs(a[i] - b[j]) + abs(a[i] - c[k]) + abs(b[j] - c[k])) / 2;
if(MinSum > Sum)
{
MinSum = Sum;
// store[0] = i;
// store[1] = j;
// store[2] = k;
}
}
}
}
// printf("the min is %d\n", minABC);
// printf("the three number is %-3d%-3d%-3d\n", a[store[0]], b[store[1]], c[store[2]]);
return MinSum;
}
int MinDistance(int a[], int b[], int c[])
{
int MinSum = 0; //最小的绝对值和
int Sum = 0; //计算三个绝对值的和，与最小值做比较
int MinOFabc = 0; // a[i] , b[j] ,c[k]的最小值
int cnt = 0; //循环次数统计，最多是l + m + n次
int i = 0, j = 0, k = 0; //a,b,c三个数组的下标索引
MinSum = (abs(a[i] - b[j]) + abs(a[i] - c[k]) + abs(b[j] - c[k])) / 2;
for(cnt = 0; cnt <= l + m + n; cnt++)
{
Sum = (abs(a[i] - b[j]) + abs(a[i] - c[k]) + abs(b[j] - c[k])) / 2;
MinSum = MinSum < Sum ? MinSum : Sum;
MinOFabc = Mymin(a[i] ,b[j] ,c[k]);//找到a[i] ,b[j] ,c[k]的最小值
//判断哪个是最小值，做相应的索引移动
if(MinOFabc == a[i])
{
if(++i >= l) break;
}//a[i]最小,移动i
if(MinOFabc == b[j])
{
if(++j >= m) break;
}//b[j]最小,移动j
if(MinOFabc == c[k])
{
if(++k >= n) break;
}//c[k]最小,移动k
}
return MinSum;
}
int main(void)
{
int a[l] = {5, 6, 7};
int b[m] = {13, 14, 15, 17};
int c[n] = {19, 22, 24, 29, 32, 42};
printf("\nBy violent solution ,the min is %d\n", Solvingviolence(a, b, c));
printf("\nBy Optimal solution ,the min is %d\n", MinDistance(a, b, c));
return 0;
}

5、这几天有点事，第5题还没仔细研究，要是解出来会第一时间更新博客！有求解方法的朋友欢迎评论！

题目部分摘取自july CSDN网站：http://blog.csdn.net/v_july_v/article/details/11921021

【前端问题汇总】

1、前端页面有哪三层构成，分别是什么？作用是什么？

结构层（由 HTML 或 XHTML 之类的标记语言负责创建）、表现层（由CSS控制）、行为层（Javascript 语言和 DOM 主宰的领域）

2、啥子是css内联式，外联式，嵌入式?

内联式就是样式的属性内容直接跟在将要修饰的html标记里，如：
<div style=”height:30px;font-size:12px;”></div>
外联式就是通过<link href=”my.css” type=”text/css” rel=”stylesheet”/> 或者 @import url(my.css); 方式引入css
嵌入式就是用<style type=”text/css”></style>方式把CSS直接写在网页中

3、去掉链接的虚线框方法

a{blr:expression(this.onFocus=this.blur());}/*只支持IE，过多使用效率低 */
a:focus{outline:none;}//FF下
其实这里还不算全部的解决方法，另篇文章里我COPY来了一份网上别人总结出来的方法，可以点 HYPERLINK "http://www.xinxueqi.com/course/12639" 这里查看

4、a链接的顺序

l-v-f-h-a 既：link-visited-focus-hover-active 这里可能大家很少用到的就是focus，这个其实也是一种链接状态，就是当你在键盘上按Tab键时获得焦点的那个链接的即时状态，遗憾的是ie并不支持（ie中按Tab键显示的效果为a:active时的状态），只有在FF,Opera等浏览器下才能看到效果。就经常性我们就会用成L-V-H-A，这个东西其实还真有点不好记，好多人觉得老是混淆特别是那个A，这里有高人把它比如成“由爱生恨” Love Hate（LV-HA），哈哈好记了吧！

5、css hack

*: IE6-7
_: IE6
\0: IE8-9
\9: IE6-9
!important: FF、IE7-9

CSS HACK书写顺序:先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的！

6、list-style-type 在ie6、ie7中不显示的解决

解决方法是给项目符号腾空间，代码：li{margin-left:25px;}

7、在IE9和FF中如何改变选择文本颜色和背景色

::selection { background:色值;color:色值; } /*Ie9+,Webkit,Opera9.5+*/
::-moz-selection { background:色值;color:色值; } /*Mozilla Firefox*/

8、如何关闭iOS中键盘自动大写

在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写

9、table中word-wrap:break-word;失效怎么解决

在table加上
word-wrap:break-word;
table-layout:fixed;

10、IE6双边距

display:inline;

11、如何解决IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白的问题？

BUG重现：
a,span{display:block;background:#ddd;}

<ul><li><a href="http://www.appue.com/">AppUE</a></li><li><a href="http://www.appue.com/">AppUE</a></li><li><a href="http://www.appue.com/">AppUE</a></li><li><span>测试li内部元素为设置了display:block的内联元素时底部产生空白</span></li></ul>

如上代码，IE6及更早浏览器每个li内部的内联元素底部都会产生空白。解决方案是给li内部的内联元素再加上zoom:1

12、如何解决IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题？

div{overflow:auto;width:260px;height:80px;border:1px solid #ddd;}
p{position:relative;margin:0;}

<div><p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p><p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p></div>

如上代码，在IE7及更早浏览器下你会看到div的滚动条将无法工作。解决方案是给div也设置相对定位position:relative

13、如何清除图片下方出现几像素的空白间隙？

方法1：
img{display:block;}

方法2：
img{vertical-align:top;}除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的和值都可以

方法3：
#img{font-size:0;line-height:0;}#img为img的父元素

14、如何让文本垂直对齐文本输入框？

input{vertical-align:middle;}

15、为什么Standard mode下IE无法设置滚动条的颜色？

html{scrollbar-3dlight-color:#999;scrollbar-darkshadow-color:#999;scrollbar-highlight-color:#fff;scrollbar-shadow-color:#eee;scrollbar-arrow-color:#000;scrollbar-face-color:#ddd;scrollbar-track-color:#eee;scrollbar-base-color:#ddd;}

将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可

16、如何使文本溢出边界不换行强制在一行内显示？

#test{white-space:nowrap;width:150px;}

设置容器的宽度和white-space为nowrap即可，其效果类似<nobr>标签

17、如何使文本溢出边界显示为省略号？

（此方法Firefox5.0尚不支持）：

#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。

18、如何使连续的长字符串自动换行？

#text{width:150px;word-wrap:break-word;}

word-wrap的break-word值允许单词内换行

19、如何让已知高度的容器在页面中水平垂直居中？

#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

20、如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？

#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}#test p{*position:absolute;*top:50%;*left:50%;margin:0;}#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

#test是img的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中

21、如何设置span的宽度和高度（即如何设置内联元素的宽高）？

span{display:block;width:200px;height:100px;}

要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，
或者position属性等等。

22、如何给一个元素定义多个不同的css规则？

.a{color:#f00;}
.b{background:#eee;}
.c{background:#ccc;}

多个规则之间使用空格分开，并且只有class能同时使用多个规则，id不可以

23、如何让某个元素充满整个页面？

html,body{height:100%;margin:0;}#test{height:100%;}

24、如何让某个元素距离窗口上右下左4边各10像素？

html,body{height:100%;margin:0;}html{_padding:10px;}#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}

25、如何容器透明，内容不透明？

方法1：

.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}.inner{width:200px;height:200px;margin-top:-200px;}<div class="outer"></div><div class="inner">我是不透明的内容</div>

原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上

方法2：

.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}.outer .inner{position:relative\9;}<div class="outer"><div class="inner">我是不透明的内容</div></div>

高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果

26、为什么2个相邻div的margin只有1个生效？

.box1{margin:10px 0;}
.box2{margin:20px 0;}

本例中box1的底部margin为10px，box2的顶部margin为20px，但表现在页面上2者之间的间隔为20px，
而不是预想中的10+20px=30px，结果是选择2者之间最大的那个margin，我们把这种机制称之为“外边距合并”；
外边距合并不仅仅出现在相邻的元素间，父子间同样会出现。

简单列举几点注意事项:
外边距合并只出现在块级元素上；
浮动元素不会和相邻的元素产生外边距合并；
绝对定位元素不会和相邻的元素产生外边距合并；
内联块级元素间不会产生外边距合并；
根元素间不会产生外边距合并（如html与body间）；
设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并；

27、如何在文本框中禁用中文输入法？

input,textarea{ime-mode:disabled;}

ime-mode为非标准属性，写该文档时只有IE和Firefox支持

【用css hack针对IE的优化】

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，这两种方法都是最安全的。

1、注释的方法
(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
html>body p {
/* 定义内容 */
}
(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
/* declarations */
}
(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用”反斜线”技巧：
/* \*/
* html p {
declarations
}
/* */
2、条件注释(conditional comments)的方法（XHTML代码处理）
另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>

HYPERLINK "http://www.cnblogs.com/zhengenru2008/archive/2009/09/10/1564092.html" IE下判断IE版本的语句...[if lte IE 6]……[endif]

<!--[if lte IE 6]>

<![endif]-->

IE6及其以下版本可见

<!--[if lte IE 7]>

<![endif]-->

IE7及其以下版本可见

<!--[if IE 6]>

<![endif]-->

只有IE6版本可见

<![if !IE]>

<![endif]>

除了IE以外的版本

<!--[if lt IE 8]>

<![endif]-->

IE8及其以下的版本可见

<!--[if gte IE 7]>

<![endif]-->

IE7及其以下的版本可见

用法：

（1）

可使用如下代码检测当前IE浏览器的版本（注意：在非IE浏览器中是看不到效果的）
<!––[if IE]>

<h1>您正在使用IE浏览器</h1>
<!––[if IE 5]>

<!––[if IE 5.0]>

<!––[if IE 5.5]>

<!––[if IE 6]>

<!––[if IE 7]>

<![endif]––>

那如果当前的浏览器是IE，但版本比IE5还低，该怎么办呢，可以使用<!–[if ls IE 5]>，当然，根据条件注释只能在IE5+的环境之下，所以<!–[if ls IE 5]>根本不会被执行。
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同

（2）

应该如何应用条件注释
本文一开始就说明了，因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样，具体就是对CSS的解释不同，我们为了兼容这些，可运用条件注释来各自定义，最终达到兼容的目的。比如：
<!–- 默认先调用css.css样式表 –->

<!–- 如果IE浏览器版是7,调用ie7.css样式表- –>

<!–-[if lte IE 6]>

<!–- 如果IE浏览器版本小于等于6,调用ie.css样式表 -–>

注意：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。
比如如下代码，在IE浏览器下执行显示为红色，而在非IE浏览器下显示为黑色。如果把条件注释判断放在首行，则不能实现。该例题很能说明网页对IE浏览器和非IE浏览器间的兼容性问题解决。
<style type="text/css">
body{
background-color: #000;
}
</style>
<!-–[if IE]>

同时，有人会试图使用<!–-[if !IE]>来定义非IE浏览器下的状况，但注意：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。

正常就是默认的样式，对IE浏览器需要特殊处理的，才进行条件注释。在HTML文件里，而不能在CSS文件中使用。

现在的DWcs4里面，已经装备了这些注释：在“窗口-->代码片段-->注释”里。其他的版本没太注意到。

总结写DIV+CSS时常见的小问题

1. ul和li属性的问题

默认的ul的内外补丁（margin、padding）都不是0，如果在li中用到的左漂浮属性（float:left;）时往往会把外部div撑大，导致页面变形，而且在ie6里，第一个li会有一个小小的缩进值，最终导致排版出问题。解决div层不被撑大时应将层的内外补丁设为0即可（margin:0;padding:0;），而解决第一个li有缩进值时则应该定义li为块状显示（display:inline;）即可

2. img属性的问题

这里牵涉的不同浏览器的问题，ie6是一直让网页设计师最头疼的一个问题。页面插入img时在ie6里有时图片显示的高度总是要大于准确值，这里不要忘了定义img显示属性：img{display:block;}

3. overflow属性的问题

此属性用的最多的地方就是文本域、注册协议等，因为文字篇幅比较大，但又不想占用大的页面篇幅，这里就可以定义好层的宽度和高度值，然后加上overflow:auto;属性。

4. float属性问题

有时会在水平方向上漂浮2个或2个以上的div层，都使用了float:left;属性，最终导致下面的层会漂浮到该水平方向上来，导致页面显示非常混乱，不注意的话在排错阶段也很难找出问题所在。对待float属性一定要谨慎，解决以上问题方法有二，第一是将这几个漂浮的层的父级层定义clear:both;属性；第二是将这几个层的宽度值加起来的值等于父级元素的宽度值，这样下面的层自然不会漂上来。

5. height值不统一

当height为1px时，在ie6中可能并不是1px而是超过1px，怎么解决呢？方法有两种，第一种是直接将该div层里的字号设为1px就可以了（font-size:1px;），第二种方法是在该div层里设置行高即可（line-height:1px;），但这里需要提醒下，在ie6里该层不能为空，可以写一个空格字符（）即可。

6. css编码问题

很多人写页面的时候习惯通过dw软件来创建一个html页面，但往往又忽略了其默认编码格式的设置，最终导致页面显示乱码。@charset “utf-8″注意这行代码，utf-8与gb2312是比较常用的两种编码方式，选择与之匹配的编码格式，避免出现乱码。

7. 关于选择器的选择（class和id）问题

当一个div要在页面中多次使用时，不要用id，要用class，还有就是要用引用js的时候，样式最好不要用id，因为id要留给js使用，当程序员写后台用的是.net时，最好不要用id，id要留给程序员用，前台我们就用class好了。

8. div层高度自动扩展问题

就是div层的结构很复杂，用了至少2个以上的div层，在定义好最小高及高度为自动，但最后超过层高度后导致在ff中显示为高度不自动扩展，解决ff不兼容方法很简单，只要加上：overflow:hiiden;即可。

9. 常用的兼容属性写法问题

这里具体实例不列出了，估计长篇大论的也没问会看，我就把常用到的兼容性属性列出来，具体灵活运用就靠自己啦！建议定义属性时书写顺序为FireFox在最前，其次是IE8、IE7，最后是IE6。

①!important属性只对ff生效，如：width:200px!important;width:100px;则ff里宽度显示为200px
②带“_”的属性只对ie6生效，如：color:red;_color:blue;则ie6里字体颜色为blue
③带“+”的属性只对ie7生效，写法如上
④ff什么都不识别，但样式中加上上述小符号，则优先对特定浏览器生效，例如css定义为：color:yellow;+color:blue;_color:red; 则输出效果为ff显示黄色，ie7显示为蓝色，ie6显示为红色

【打造自己的Reset.css】

0，引言
每每有新项目， HYPERLINK "http://www.qianduan.net/?p=5539" \t "_blank" 第一步就是应当使用一个reset.css来重置样式。滥用不如不用，直接拿个现成的reset.css过来将导致后期各种离奇bug的发生。所以最好还是自己写一个reset.css，并且要明白每一条reset都是用来做什么的。reset.css本意就是重置样式，我始终建议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css。具体如何规划网站CSS结构，不在文本讨论之列，可以参考Smashing Magazine上的 HYPERLINK "http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/" \t "_blank" 文章，国内有差强人意的 HYPERLINK "http://www.webjx.com/css/divcss-7054.html" \t "_blank" 中文译版。注意，本文把reset分成了两个部分，一个是纯reset.css，可以用于任何项目。另一个是用于特定项目的“reset”，自定义修改的内容，这些内容可以放在layout.css、typography.css之类的文件中，他们共同导入到一个base.css形成一个项目的基础样式。本文就是来介绍如何写一个合适所有项目的通用的reset.css，以及介绍在设置玩reset.css之后需要针对不同项目要首先要设置的内容。

1，基础
牛顿是站在巨人伽利略的肩膀上的，我们也可以这么做。首先我们要选定一个前进的基础。
请永远不要使用

复制内容到剪贴板

代码:

* { margin: 0; padding: 0; }

这问题太多了，在此不多加表述。

目前比较流行的有 HYPERLINK "http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/" \t "_blank" Eric Meyer的重置样式和 HYPERLINK "http://developer.yahoo.com/yui/reset/" \t "_blank" YUI的重置样式。另有 HYPERLINK "http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/" \t "_blank" Condensed Meyer Reset简化Eric Meyer的样式。有趣的是，Eric的重置样式也是 HYPERLINK "http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/" \t "_blank" 源于YUI的。而那份简化版又把Eric的样式简化回YUI的样式了。但同时，糟糕的是，网上流传的比较广的(尤其是国内)都不是最新的版本。上面两个页面里直接看到的都不是最新的，Eric专门为有一个 HYPERLINK "http://meyerweb.com/eric/tools/css/reset/index.html" \t "_blank" reset.css页面。而YUI当前版本(2.7.0)的reset.css HYPERLINK "http://yui.yahooapis.com/2.7.0/build/reset/reset.css" \t "_blank" 实际地址里，比上面的页面中还多一些东西。此外，我们还可以基于一些常见的框架，比较著名的比如 HYPERLINK "http://www.blueprintcss.org/" \t "_blank" Blueprint或者 HYPERLINK "http://elements.projectdesigns.org/" \t "_blank" Elements CSS Framework（这个的reset也是源自于Eric Meyer的）。OK，准备工作就差不多了。以上这些都可以作为参考资料来组织我们自己的reset。我这里主要采用YUI，兼带Eric的reset。

2，默认色彩
对于页面是不是有默认背景色和前景色，YUI和Eric有着不同的看法。
YUI重置背景色为白色而文字颜色为黑色。

复制内容到剪贴板

代码:

html {
color: #000;
background: #FFF;
}

而Eric在当前最新版中让所有颜色为透明，他认为透明才是最原始的颜色。虽然他曾 HYPERLINK "http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/" \t "_blank" 一度认为也应当设置白色背景色、黑色文字颜色。至于最后为什么改了，Eric并没有给出具体理由。

这个问题我基本认为是用户自定义的更重要还是你的设计更重要的问题。我个人的观点是，如果你的设计本身就是白色背景，那么不要设置背景。一小部分中高水平的用户，他们会自定义网页默认背景色。设置成他们喜欢的背景色，比如浅蓝色。基本常见的浏览器都提供了这个简单的功能。而我们的背景色重置则会破坏用户的选择——尽管这样能保证你的设计原汁原味的呈现给所有用户。当然我知道，更高端的用户会用Stylish之类的Firefox扩展来自定义页面。但不得不说，只会用“选项”来调背景色的用户更多，不是么？而同时，如果设计本身就有其他背景色，比如黑色、蓝色、绿色之类的，OK，这些设计当然可以设置背景色。但请不要放进reset.css里。这里是重置样式的地方，不是你设计的地方。请把你的设计放在更广袤的土地上。
所以，简单说来，NO，不要在reset中设置背景色。

那么，文字颜色呢？原则上来说，也是不应该设置文字颜色的。但是IE中的表单元素中legend这个对象比较特别，跟主题结合的比较紧密。legend会默认有自己的颜色（跟当前的主题有关）而不会继承父元素的颜色（即便设了color:inherit;）。
从某些角度来说，可以想当然地认为设置字体颜色人数远小于设置背景色的人数；以及认为就算设置了背景色，人们看到legend元素是黑色的也不会觉得奇怪。因此，YUI在其reset中设置了legend {color: #000;}是无可厚非的。
但反过来说，把这个放到typography.css或者form.css里岂不是更好？不同的页面设计，其对legend的色彩要求很可能是不同的，放在reset.css里重复定义是没有必要的。因此这条CSS规则可以作为在reset.css之后首先应当设置的规则。

3，padding和margin
曾经一度流行的

复制内容到剪贴板

代码:

* { margin: 0; padding: 0; }

也就是出于这个目的。让各个元素的padding和margin都归零，尤其是那些h1和p以及ul/ol/li之类的元素，还有，body本身也是有margin的。清除元素的padding和margin是很有用的。
YUI这样做：

复制内容到剪贴板

代码:

body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}

而Eric这样做：

复制内容到剪贴板

代码:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

可以看到，Eric把几乎所有的元素都写上了规则。而YUI只把有padding和margin的元素清空样式，而其他元素则不动。我个人比较偏好YUI的做法，因为他这样可以避免给一些无关元素带上不必要的样式。导致元素过多时的性能下降。但Eric的也有可取之处，他这样写，整个reset.css可以小上不少字节，对服务器的压力会小一些。但进一步想，这种做法跟用 * 来选择所有元素还有什么区别呢？这已经几乎囊括了所有元素了！你怎么用呢？看你自己喜好了。

4，边框
YUI里：

复制内容到剪贴板

代码:

fieldset, img {
border: 0;
}
abbr, acronym {
border: 0;
font-variant: normal;
}

Eric已经在上一条中把所有的边框都清掉了，还是推荐用YUI的，理由同上。

5，外边框(outline)
这个就是元素获取焦点时的虚线框，在ie之外的浏览器上可以像下面Eric做的那样，通过设置outline来消除。

复制内容到剪贴板

代码:

/* remember to define focus styles! */
:focus {
outline: 0;
}

而YUI则没有设置这一条。而在Eric的样式中，可以看到Eric的提醒：务必重新定义获取焦点后的样式！
这点其实很重要，出于可访问性的角度出发，那些不便于使用鼠标的人基本上都是用tab导航来浏览网页的。获取焦点的元素有特定样式的话可以极大帮助这类群体的用户，通常建议设置成跟:hover一样。经常设计上会因为这个虚线框而大打折扣。因此这条保留在reset中，并且作为reset.css之后及早定义的规则。

另外，对于在Firefox之类的支持outline的浏览其中，除了获取焦点的元素外，浏览器本身并没有给元素设置outline属性，所以，像Eric那样把所有元素的outline设成0，我就觉得没有太大必要了。

6，字体样式(font style/weight/size/variant)
YUI里，分成了多条：

复制内容到剪贴板

代码:

address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: inherit;
font-weight: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}
input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}

Eric则在他最终版的reset中去掉了关于这些的样式重置，只保留了

复制内容到剪贴板

代码:

font-size: 100%;

理由见下文。
但通常情况下，我认为还是重置一下这些样式好，比如strong元素，很多时候只是语义而已，并非希望他真的加粗。可能会有背景色或者其他方式来强调。而之所以这里都用了inherit这个继承属性而不是定义

复制内容到剪贴板

代码:

font-weight: normal;

可以在 Eric 先前的 HYPERLINK "http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/" \t "_blank" reset文章中看到。这是为了防止——父元素字体加粗了，而没有一个子元素继承加粗属性（因为设置了normal）——这种情况的发生。所以把YUI中设置h1-h6的样式以及abbr和acronym的两句样式都改成inherit会比较好。

此外，对于h1-h6的字体大小定义，建议放到专门的typography.css里，不建议放在reset.css里。所以这里我同样倾向于用YUI的策略，全部重置。

但是很不幸，在ie6/ie7当中，不论是strong还是h1-h6,亦或是em等元素，设置了inherit均无法继承父元素属性，依然保持自己的特色。这就带来了浏览器差异，样式重置本身是为了避免浏览器差异的，但现在带来了浏览器差异，是万万不可取的。对于这个问题我考虑了很久，到底是为了统一所有浏览器都重置成normal（YUI的想法），还是放弃重置这些元素，让他们顺其自然，来保证在所有浏览器中样式一样（Eric的想法）。我最后决定采用YUI的做法。因为，无论重置成normal还是不重置，这些元素都无法继承父元素属性。既然如此，那么退而求其次，保证这些元素都恢复到普通外观，避免在设计的时候还要重置样式。
不得不说，这种妥协是仅仅针对IE6和IE7的，也许在5年后，老板和客户都不要求支持IE7的时候，我们可以放心大胆得使用inherit了。

此外，YUI并没有给code kbd samp tt 这几个元素重置字体大小。但实际上在IE中，他们都会被缩小显示。所以此处应当给予重置font-size: 100%;

7，行高(line-height)
对于行高，YUI并没有给出重置定义，而Eric则给出了重置：

复制内容到剪贴板

代码:

body {
line-height: 1;
}

行高默认所有元素都会继承的，所以给body设置行高为1就足够了。通常行高设为1时候，英文照常阅读，但中文就无法阅读了，行间距过于紧密导致容易看错行。通常在中文环境下得设置1.4到1.5才能是用户正常阅读。我建议是1.5，这样算出来的值也是整数。比如字体大小12px的时候行高是18px，字体大小16px时行高24px。看起来也会比较舒服。此外，还有一个不设置成1的重要原因是：IE下，行高为1时，中文字顶部会被削掉几像素，字体加粗时尤为明显。所以，重置的原则是好的，但切不可重置为1。

8，列表样式
YUI用了：

复制内容到剪贴板

代码:

li {
list-style: none;
}

Eric用了：

复制内容到剪贴板

代码:

ol, ul {
list-style: none;
}

尽管我没有测试出YUI的有什么问题，但我始终觉得设置ol和ul会比较稳妥。而且，波及的元素更少，性能应该更高一点。虽然下载量会多3字节。

9，表格元素
在表格方面，都比较统一。均是：

复制内容到剪贴板

代码:

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Eric还提醒到，需要在html中设置cellspacing=”0″ 来达到完美重置效果。
但此外YUI还设置了

复制内容到剪贴板

代码:

caption, th {
text-align: left;
}

让caption和th元素不要居中。作为重置，是可取的。建议添加此规则。

10，上下标以及baseline
YUI写成

复制内容到剪贴板

代码:

sup {
vertical-align: baseline;
}
sub {
vertical-align: baseline;
}

似乎没有优化，不知道为何没有写到一起去。而Eric则在最开始那条中就已经定义。而其中的问题是，YUI这样定义了，但没有重置字体大小，这点是有所遗憾的。既然是重置样式，就彻底一些，所以建议改成这样的：

复制内容到剪贴板

代码:

sup, sub {
font-size: 100%;
vertical-align: baseline;
}

同样对于Eric把所有元素都放到了Baseline上，包括上标下标。Eric的 HYPERLINK "http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/" \t "_blank" 解释是，强制让设计师精确定位这些元素的垂直偏移。

11，插入和删除(ins/del)
对于这个问题，YUI直接清除了ins的下划线和del的删除线这两个文本装饰：

复制内容到剪贴板

代码:

del, ins {
text-decoration: none;
}

而Eric保留了删除线：

复制内容到剪贴板

代码:

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

如何取舍？我选择Eric的，为什么我这里不追求完美的样式重置了呢？很简单，我这个reset的目标是为了让我们写页面的时候尽量避免浏览器默认样式，以及不同浏览器之间默认样式差异带来的问题。而del元素删除线的文本装饰，我相信没有人会反对的。有人会加上其他样式，比如字体变淡之类的，但对于del如此强语义的元素来说，没有什么比用删除线更能表达含义的了。而不像上面那个focus样式，未必人人喜欢虚线框。但似乎又没有什么浏览器默认不给del元素加删除线，故这条可以省略。
所以，这里我只重置ins样式，别忘了给ins元素在等下也添加一些样式。

12，引用元素的引号
某些浏览器中，q或者blockquote前后会出现引号。这个并不是谁都喜欢的。所以需要重置他。
YUI的比较简单，只重置了q：

复制内容到剪贴板

代码:

q:before,
q:after {
content: '';
}

而Eric则比较周到，把q和blockquote都重置了。

复制内容到剪贴板

代码:

blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

OK，就决定用Eric的了，对于样式重置，细致一点周到一点总没有错。

13，链接
对于链接，YUI和Eric都没有采取样式重置，但从我思考许久后还是决定把链接样式重置放进来。究其原因，还是因为样式重置一来要彻底，二来对于链接样式并非所有设计师都喜欢用下划线装饰。因此，我还是建议把链接的下划线重置掉。

复制内容到剪贴板

代码:

a {
text-decoration: none;
}

但这样做有点粗糙。真正有下划线样式的其实只有 :link和:visited所以改成下面这样比较好：

复制内容到剪贴板

代码:

:link, :visited {
text-decoration: none;
}

此外，对于链接颜色，可以作为reset后急需设置的规则来处理。直接放入reset.css中不是很合适。

14，我的重置样式
总结上面种种规则，这里给出一下我的CSS重置规则，BSD协议发布，请随意使用。 HYPERLINK "http://shawphy.com/lab/reset/reset-simple_source.html" \t "_blank" 测试样本（这个是从 HYPERLINK "http://developer.yahoo.com/yui/examples/reset/reset-simple_source.html" \t "_blank" YUI那里复制过来的，感谢YUI为此做出的贡献。）
下载： HYPERLINK "http://shawphy.com/lab/reset/reset.css" \t "_blank" reset.css HYPERLINK "http://shawphy.com/lab/reset/reset-min.css" \t "_blank" reset-min.css

复制内容到剪贴板

代码:

http://shawphy.com/2009/03/my-own-reset-css.html

Based on YUI http://developer.yahoo.com/yui/reset/
and Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
Licensed under the BSD License:

http://creativecommons.org/licenses/BSD/

version: 1.1 | 20090303
*/
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
fieldset, img {
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: normal;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}
input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
code, kbd, samp, tt {
font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}
body {
line-height: 1.5;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited , ins {
text-decoration: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

15，完成一个初步的CSS框架
之前提到了，样式重置作为一个所有项目可以使用的共性存在，而不同的项目应当有其个性。当然还有其他一些共性，不属于样式重置的部分，但同样重要。再往下讲就可以做一个CSS框架了。CSS框架所要考虑的内容远比一个CSS Reset要考虑的多很多，这里只是点到为止，不做更多展开。

layout.css
首先除了reset.css之外要建立的layout.css，这里目前主要推荐放入.clearfix。清除浮动很重要。但这不属于样式重置，放在布局当中正合适。

复制内容到剪贴板

代码:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

此外，layout.css中还可以放入自己常用的布局，比如

复制内容到剪贴板

代码:

#wrap{margin:0 auto;width:960px;}

之类的规则。看个人喜好而定。

typography.css
这里可以放置很多规则，非常重要的是以下三个：
:focus, a, ins
这三个是被重置掉的，但又很重要的内容，建议在reset之后立即在typography中设定全站样式，保持样式统一。
ins可以单独设置， :focus 最好设置成跟 :hover一样，而a的样式还是按照LoVe,HAte的法则来设置。

h1-h6系列也是之前被重置掉的。可以考虑在这里设置样式。按站点特性来定。我个人是不喜欢全局定义hx系列的字体大小的，统一为100%我觉得挺好。

接下来要设置的是font-family属性，可以参考 HYPERLINK "http://lifesinger.org/blog/?p=1227" \t "_blank" 射雕的文章。另外， HYPERLINK "http://www.mikkolee.com/118" \t "_blank" 小麦的文章中提到，表单元素的字体在IE中都不能继承父元素的字体，所以要单独设置。

至于其他需要全局设置的，可以参考前文中的叙述，找到相应的部分添加到typography.css中即可。这样就可以在保证reset.css通用性的情况下，使不同的项目又有个性。尽量保证reset.css在所有项目中都是一样的。有利于项目的开发。最后不要忘记在写表格的时候加cellspacing=”0″ 来达到完美重置效果。

16，探讨
文章写的比较仓促，也受限与本人能力所限，只能写到这里。欢迎留言探讨，也可发邮件或上 HYPERLINK "http://twitter.com/shawphy" \t "_blank" Twitter找我。以便进一步完善这个reset。谢谢。

原文地址： HYPERLINK "http://shawphy.com/2009/03/my-own-reset-css.html" \t "_blank" http://shawphy.com/2009/03/my-own-reset-css.html

认识hasLayout——IE浏览器css bug的一大罪恶根源

HYPERLINK "http://27.115.13.122/blog/archives/311" http://27.115.13.122/blog/archives/311

CSS中zoom:1的作用 ，小标签大作用

HYPERLINK "http://27.115.13.122/blog/archives/306" http://27.115.13.122/blog/archives/306

彻底弄懂css中单位px和em的区别

HYPERLINK "http://27.115.13.122/blog/archives/302" http://27.115.13.122/blog/archives/302

img图片元素下多余空白解决方案

HYPERLINK "http://27.115.13.122/blog/archives/300" http://27.115.13.122/blog/archives/300

border:none;与border:0;的区别

HYPERLINK "http://27.115.13.122/blog/archives/298" http://27.115.13.122/blog/archives/298

IE6的3像素bug

HYPERLINK "http://27.115.13.122/blog/archives/296" http://27.115.13.122/blog/archives/296

清理浮动的那些事儿——6种清理浮动的方法

HYPERLINK "http://27.115.13.122/blog/archives/289" http://27.115.13.122/blog/archives/289

【转】JS面试题

(2010-04-07 10:33:41)

转载▼

标签：

js

prototype

it

分类： JavaScript

1. JS 利用 prototype 实现继承

function cls1()
{
this.a='123';
}
function cls2(){
this.display = function() { alert("show this"); };
}

//必须在所有prototype方法申明之前调用，否则会擦除之前申明prototype方法, 但this.display不会被擦除

//this.display这种申明会占用更多的内存

cls2.prototype = new cls1();

cls2.prototype.show = function() { alert("show"); }

var o=new cls2();
alert(o.a);
o.show();
o.display();

另一种实现方式

http://blog.csdn.net/tyro668/archive/2009/06/17/4276094.aspx

http://www.blogjava.net/zJun/archive/2006/03/06/33905.html
当你访问一个对象的属性时，编译器将先查找对象的属性看有没有匹配的。如果没有找到，将继续查找这个对象的prototype属性所指的对象，看是否存在匹配的属性。如果还是没有找到，编译器将检查当前对象的prototype是否拥有prototype属性，如果有将继续查找下去。以此类推，直到查找完所有的prototype属性。

function car(){}
car.prototype.color = "red";
car.prototype.doors = 4;
car.prototype.drivers = ["a","b","c"];
var c1 = new car();
var c2 = new car();
c1.drivers.push("d");
c2.doors = 40;
alert(c2.drivers); //a,b,c,d
alert(c1.doors); //4

prototype 里的引用类型与值类型.

JS面试题-动态生成表格代码

利用JS动态生成表格，是一个JS面试题，在行、列输入框中输入要生成的行列数，可立即生成表格，要求如下：
　　1) 任意输入行数或列数, 生成对应表格;
　　2) 行数, 列数必须为正整数类型, 否则提示非法;(这里我用正则限制1-100, 避免网友测试输入过大值造成浏览器假死)
　　3) 在生成表格的单元格中随机填入1到15之间的随机数, 并给每个单元格设置随机背景颜色;
　　4) 点击任意单元格, 将其数和背景颜色输出显示;
　　5) 效率要求：100*100生成表格时间小于3秒;
　　6) 代码中要用到事件代理机制;
　　7) 设计一种简单机制, 使单元格数小于255*255*255时, 颜色不重复
　　8) 要求符合w3c验证, 兼容IE, Firefox, chrome等浏览器

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>面试题-动态生成表格</title>
<style> 
body{font:700 14px/1.5 Arial;margin:0;padding:0 10px;}
table{clear:both;border:1px solid #000;}
td{color:#FFF;cursor:pointer;text-align:center;border:1px solid #000;padding:5px;}
#setting{float:left;clear:left;line-height:28px;margin:10px 0;}
#setting input{width:50px;font-family:inherit;border:2px solid #CCC;margin:0 5px;padding:4px;}
#btn{font-size:14px;line-height:18px;color:#fff;text-decoration:none;background:#353535;border-top:1px #999 solid;border-radius:5px;padding:4px 6px;}
#msg{float:left;clear:both;height:25px;display:none;line-height:25px;margin-bottom:10px;}
#msg em{width:25px;height:25px;display:inline-block;margin-right:5px;}
#setting label,#setting input,#setting a,#msg span,#msg em{float:left;}
</style>
<script> 
function CreateTable() {
	this.oTable  = null;
	this.bgColor = 0;
}
CreateTable.prototype = {
	init: function(row, col) {
		var oFrag = document.createDocumentFragment();
		var oTemp = document.createElement("div");
		var oBody = document.body;
		var aRow  = [];
		var aCol  = [];
		for(var i = row; i--;) {
			aCol.length = 0;			
			for(var j = col; j--;) {
				this.bgColor = this.getRanColor();
				aCol.push("<td style=\"background:"+ this.bgColor +";\">"+this.randomRange(1, 15)+"</td>");
			}
			aRow.push("<tr>"+ aCol.join("") +"</tr>")
		}
		oTemp.innerHTML = "";
		oTemp.innerHTML = "<table><tbody>"+ aRow.join("") +"</tbody></table>";
		while(oTemp.firstChild) oFrag.appendChild(oTemp.firstChild);
		this.oTable && oBody.removeChild(this.oTable);
		oBody.appendChild(oFrag);
		this.oTable = oBody.lastChild
	},
	randomRange: function(lower, upper) {
		return Math.floor(Math.random() * (upper - lower + 1) + lower)	
	},
	getRanColor: function() {
		var str = this.randomRange(0, 0xF0F0F0).toString(16);
		while(str.length < 6) str = "0" + str;
		return "#" + (this.bgColor.toString().replace("#", "").toString(10) === str.toString(10) ? str + 100000 : str)
	}
};
 
window.onload = function() {
	var oTab = new CreateTable();
	var oRow = document.getElementById("row");
	var oCol = document.getElementById("col");
	var oBtn = document.getElementById("btn");
	var oMsg = document.getElementById("msg");
 
	oBtn.onclick = function() {
		var reg = /^((?!0)\d{1,2}|100)$/;
		if(!reg.test(oRow.value)) {
			alert("\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u6570\u503c\uff1a\n\n\u5217\u6570\u8303\u56f4\u30101-100\u3011");
			oRow.select();
			return
		}
		else if(!reg.test(oCol.value)) {
			alert("\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u6570\u503c\uff1a\n\n\u884c\u6570\u8303\u56f4\u30101-100\u3011");
			oCol.select();
			return
		}
		//隐藏信息区域
		oMsg.style.display = "none";
		//防止内存泄漏
		oTab.oTable && (oTab.oTable.onclick = null);
		//重新渲染表格
		oTab.init(oRow.value, oCol.value);
		//事件代理
		oTab.oTable.onclick = function(e) {
			e = e || event;
			var oTarget = e.target || e.srcElement;
			if(oTarget.tagName.toUpperCase() === "TD") {
				oMsg.style.display = "block";
				oMsg.innerHTML = "";
				oMsg.innerHTML = "<span>\u60a8\u9009\u62e9\u7684\u533a\u57df\u6570\u5b57\u662f\uff1a"+oTarget.innerHTML+"\uff0c\u989c\u8272\u4e3a\uff1a"+"</span><em style=\"background:"+ oTarget.style.backgroundColor +";\"></em><span>"+oTarget.style.backgroundColor+"</span>";	
			}
		}
	}
};
</script>
</head>
<body>
<div id="setting">
    <label>行数</label><input type="text" id="row" />
    <label>列数</label><input type="text" id="col" />
    <a href="javascript:;" id="btn">生成表格</a>
</div>
<div id="msg"></div>
</body>
</html>

百度文库中两份基础题目：

转载于:https://my.oschina.net/maomi/blog/137811