前言
本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！
面试有几点需注意：
1.面试题目： 根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方 向↑。
2.题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。
3.进行追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延 展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学 习，绝对不是临时记得住的。
回答问题再棒，面试官（可能是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲）
资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。
前端开发面试知识点大纲：
HTML&CSS：
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应
JavaScript：
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
其他：
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯
前端工程师，必须掌握的知识点：
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。
4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型
7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
10、JSON —— 作用、用途、设计结构。
………………
一．HTML&&CSS
1.CSS选择器有哪些？哪些属性可以被继承？
元素选择器、类选择器、 ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器、伪类、伪元素......
CSS继承特性主要是指文本方面的继承，常用的例如：font-size , color , font-family , font-weight , text-align , text-indent , line-height 等，都是可以继承的；而关于与盒模型相关的不带继承。
具体：
不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
2.HTML5为什么只需要写,作用是什么？
HTML5 不基于 SGML，所以不需要引用 DTD，因此没有声明DTD;
作用：声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。（浏览器获知文档类型）;
(**在 HTML 4.01 中，声明引用 DTD，因为 HTML 4.01 基于 SGML。
SGML(Standard Generalized Markup Language)，即标准通用标记语言;DTD (Document Type Definition)规定了标记语言的规则，这样浏览器才能正确地呈现内容。**).
3.CSS3中如何实现屏幕的自适应？
（1）添加在HTML页面的元元素,;
（ 2 ）将CSS中的固定值修改为相对值;
（ 3 ）栅格系统（流式网格布局）;
（ 4 ）CSS3的媒体查询;
4.HTML中放入CSS样式的几种方式。
内联样式：style=”属性：属性值;”
内部样式：
外部样式：
5.简述如何居中div,如何居中一个浮动的元素，如何让绝对定位的div居中？
绝对定位和浮动的元素居中：知道定位元素本身的宽高的话,例:宽高是300px position: absolute; left: 50%; top: 50%; margin：-150px 0 0 -150px;
水平垂直居中：
1 inline-block配合text-align加上table-cell配合vertical-align
.parent{
display: table-cell;
vertical-align:middle;
text-align:center;}
.child{
display: inline-block;}
2 absolute配合transform
.parent{
position: relative;}
.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);}
3.
.parent{
display: flex;
justify-content: center;
align-items: center;}
4. (水平居中)
.div{position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#####6.利用CSS实现等高布局
i.左侧宽度的30%背景色为灰色，右侧宽度70%背景色为红色
ii.左侧高度随着右侧高度变化而变化（右侧高度不定）
利用padding-bottom|margin-bottom正负值相抵；
设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
7.Margin属性应用。
http://www.zhangxinxu.com/wordpress/?p=48
(1)控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
(2).页面上实现css sprite背景定位效果
关于页面上背景定位效果，可以参见我的文章“IE6下png背景不透明问题的综合拓展”有关页面上定位的demo实例页面
(3).在选项卡等边框线的处理
下图显示的是一种比较常见的选项卡样式，旧版的迅雷首页就是这样子的选项卡。
我其实已经在图上做了点小小的标注，使用margin-top:-1px;解决选项卡下边框显示的问题。类似的，如果您要用四个div实现5条1像素的左右边框，就像表格一样的效果，就可以使用让每个div都有左右1像素的边框，然后margin-right:-1px;或是margin-left:-1px;让之间的边框重叠，这样就实现了四标签实现5边框的效果了。
(4).图片与文字对齐问题
图片与文字默认是居底对齐了。所以当图片与文字在一起的时候往往都是不对齐的。尤其图片较小时就更加明显了，我看到很多人使用vertical-align:middle;对齐。在火狐下效果是不错，但是IE下，虽然是效果好了些，但还是不够。
如果，图片是个20像素*20像素左右的小图片，文字也差不多12px大，则使用vertical-align:text-bottom;是不错的个方法。还有个屡试不爽，兼容性不错的方法就是使用margin负值了。img标签是个很不错的标签，支持margin四个方向的正的和负的定位。一般img标签打头的小图标与文字对齐的话，img{margin:0 3px -3px 0;}可以说是公式版的东西，能实现效果和兼容性俱佳的对齐效果。
8.position的应用（属性值以及区别）？
http://www.cnblogs.com/bokin/archive/2012/12/14/2816864.html
9.Border属性。
10. 为什么要进行CSS样式重置。
-因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
-当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,
textarea,hr{margin:0;padding:0}
body,button,input,select,textarea{ font:12px/1.5 "宋体",arial, verdana, sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
li{list-style:none}
fieldset,img{border:0}
table{border-collapse:collapse;border-spacing:0}
q:before,q:after{content:”}
button,input,select,textarea{font-size:100%}
legend{color:#000}
small{font-size:12px}
hr{border:none;height:1px}
a{text-decoration:none}
a:hover{text-decoration:underline}
.cle:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.cle{ display:inline-block}
.cle{ display:block}
.clear {clear: both;}
豆瓣上的几种重置模板：https://www.douban.com/note/330400235/
11.a元素target属性规定在何处打开页面上所有链接，请举例说明。
http://www.doc88.com/p-130783716484.html
1._blank my document
浏览器会另开一个新窗口显示document.html文档
2._parent my document
指向父frameset文档
3._self my document
把文档调入当前页框
4._top my document
去掉所有页框并用document.html取代frameset文档
12.选择器优先级排序（由大到小），写出示例；（标签选择器，ID选择器，类选择器）
ID选择器>类选择器>标签选择器
13．样式中:before，:after的作用？
:before，:after是伪元素选择器，定义到元素内容之前，之后要配合content: “ ”;一起使用.
解决问题：1、撑起包含浮动元素的父元素的高度
(1)、指定元素高度
(2)、overflow:hidden;
(3)、追加空子元素，clear:both
(4)、div:after{
content:"";
display:block;
clear:both;
}
2、上外边距溢出问题：
#d2:before{
content:"";
display:table;
}
14. 行内元素有哪些，块级元素有哪些，空元素（单标签）有哪些，请举例说明，每种至少3个？
行内元素：,,,,,
,,