web前端面试题总结

1.知道JavaScript中的原型是什么吗？什么是原型链？能手写一个原型链继承的例子吗？

答：
(1)在javascript中每个对象都保持着一块隐藏的状态——一个对另一个对象的引用也被称为原型。
（2）原型链的定义：Javascript对象上都有一个内部指针【prototype】，指向它的原型对象，而原型对象的内部指针【【prototype】】也指向它的原型对象，直到原型对象为null，这样形成的链条称为原型链。
也就是说，由于原型对象也有一个proto指针，又指向了另外一个原型，一个接一个，就形成了原型链。
（3）

1 function Name(){

2    this.name=function(){

3        console.log("killua")

4    }

5 }

6 function Firstname(){

7    this.firstname=function(){

8        console.log("L")

9    }

10 }

11 Name.prototype = new Firstname();

12 var he = new Name();

13 console.log(he.name); //"killua"

14 console.log(he.firstname); //"L"

原型链继承的例子来自：
作者：晓綾
链接：http://www.jianshu.com/p/6a0ca6199550
來源：简书

2.知道什么是Webpack吗？说说你理解的Webpack?

答：

webpack是一款用户打包前端模块的工具。主要是用来打包在浏览器端使用的javascript的，同时也能转换、捆绑、打包其他的静态资源。
webpack需要编写一个config文件，然后根据这个文件来执行需要的打包功能。
webpack可以看作是一个模块打包机：它分析你的不同的项目结构，找到javascript模块以及其他的一些浏览器不能直接运行的拓展语言，并将其打包为合适的格式以供浏览器使用。模块化可以让我们把复杂的程序细化为小的文件。

3.说一下你知道的能影响页面布局的CSS属性？

答：
CSS常用属性：

字体属性：(font)
大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
行高 line-height: normal;(正常) 单位：PX、PD、EM
粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
变体 font-variant: small-caps;(小型大写字母) normal;(正常)
大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体： (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性： (background)
色彩background-color: #FFFFFF;
图片background-image: url();
重复background-repeat: no-repeat;
滚动background-attachment: fixed;(固定) scroll;(滚动)
位置background-position: left(水平) top(垂直);
简写方法 background:#000 url(..) repeat fixed left top;
区块属性： (Block)
字间距letter-spacing: normal; 数值
对齐text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进text-indent: 数值px;
垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
词间距word-spacing: normal; 数值
空格white-space: pre;(保留) nowrap;(不换行)
显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)
方框属性： (Box)
width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左
边框属性： (Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:; 边框宽度
border-color:#;
简写方法border：width style color;
列表属性： (List-style)
类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
位置list-style-position: outside;(外) inside;
图像list-style-image: url(..);
定位属性： (Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切)

4.说说你对CSS盒模型的理解？知道box-sizing是什么吗？

答：
（1）标准的CSS和子模型是由margin(边界）、border(边框）、padding(空白）和content（内容）几个属性组成。

margin（边界）：外边距，用来设置内容与内容之间的距离。
border（边框）：可以设置内容边线框的粗细、颜色和样式等。
padding(空白）：也称页边距或补白，用来设置内容和边框之间的间距。
content(内容）：盒子模型中必须的部分，可以是文字、图片等元素。

图片发自简书App

（2）box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素，默认值是content-box,设置或检索对象的盒模型组成模式，对应的脚本脚本特性为boxsizing。

5.说一下CSS属性中display中的block、inline和inline-block概念和区别。

block-level elements(块级元素）

block元素通常为独立一块，会单独换一行。

inline elements(内联元素）

inline元素前后不会产生换行，一系列inline元素都在一行内显示直到该行排满。

block元素包括block元素和inline元素，inline元素只能包括inline元素。

inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会被排在同一行内。

6.如果要你写一个百度搜索的首页，你觉得你会用到哪些HTML标签？

<！DOCTYPE HTML>
<html></html>
<head></head>
<title></title>
<body></body>

7.说下你对前端的看法？

Web前端开发技术包括三个要素:HTML、CSS和JavaScript，但随着RIA的流行和普及，Flash/Flex、Silverlight、XML和服务器端语言也是前端开发工程师应该掌握的。Web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，需要掌握的技能非常多。这就从知识的广度上对Web前端开发工程师提出了要求。如果要精于前端开发这一行，也许要先精十行。然而，全才总是少有的。所以，对于不太重要的知识，我们只需要"通"即可。但"通"到什么程度才算够用呢?对于很多初级前端开发工程师来说，这个问题是非常令人迷惑的。
Web发展的很快，甚至可以说这些技术几乎每天都在变化!如果没有快速学习能力，就跟不上Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式;仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。前端开发的入门门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事IT工作的人来说，前端开发是个不错的切入点。也正因为如此，前端开发领域有很多自学成"才"的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。

另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来，例如CSS sprite、悬浮定位、负边距布局、栅格布局等;各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力;浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。为了满足"高可维护性"的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。
前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。Web前端开发技术主要包括三个要素:HTML、CSS和JavaScript!HTML甚至不是一门语言，仅仅是简单的标记语言!CSS只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。Javascript的基础部分相对来说不难，入手还算快。

前端开发的入门门槛很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。也正因为如此，前端开发领域有很多自学成"才"的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。人们常说:不想当裁缝的司机，不是个好厨师。如果单纯只是学习前端编程语言、而不懂后端编程语言(PHP、ASP.NET，JSP、Python)，也不能算作是优秀的前端工程师。在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳。

8.了解Node.js吗？Node.js相比PHP有哪些优势和劣势？

优势：

处理高并发场景性能高。
函数式编程非常适合写异步回调连。
劣势：
大量匿名函数使异常栈变得不好看。
无法以request为单位catch异常。