前段时间专心整理一下关于前端的面试问题。感谢耐心尽责的楷豪和闻东师兄最近给我们的指导和建议。大家可以通过这些问题，大家可以顺便看以下自己的水平。
https://github.com/h5bp/front-end-developer-interview-questions/tree/master/translations/chinese
我也利用课余时间（三天没安排课程的下午晚上）尝试写下自己的答案，水平有限，望体谅。
暂时只提供上半部分，下半部关于js和jquery的还有部分答案未完全确认，稍后再发布。
你在昨天/本周学到了什么？  这段事件一直在整理有关前端的面试题目，整理这也题目，不只是为了能够学习应付即将到来的面试，更是为了补补基础知识。日常项目开发进度太快了，很多属性或者方法用了就忘，这样会造成另外一个隐患，因为基本知识不够扎实，常用的方法用得不够熟练，就很难高效率地开发项目。
有了扎实的基础知识，才能其期盼自己走得更远。
1）知道w3c的标准，于是在编写html时候会规避“标签不闭合，乱嵌套，大小写混杂”可能造成不同浏览器展示不一致的隐患。
2）知道了css的“层叠”规则，整理并且对比了清楚浮动和实现居中的方法，还发现了一些不常用属性。于是，有利于日后高效地编写样式表。
等等，等等
编写代码的哪些方面能够使你兴奋或感兴趣？ 编写代码最让我兴奋的是学习新的技术，尝试新的视觉效果的过程。
例如topview招新网站上，考虑到日后页面上由于丰富的交互和功能，脚本文件较大。虽然一般浏览器对文件有异步加载功能，但是这些文件指的是图片视频样式表等，不包含脚本，也就是说当加载脚本的时候会造成堵塞，脚本的加载会堵塞页面上的图片加载，也就是说因为脚本文件过大，用户可能需要等待较长的事件。当页面内部的脚本等基本元素没加载完毕，当时样式和结构已经加载完后，css3动画出现，四个小球流畅地旋转滚动直到脚本完全加载完毕。
前端本身就是一个美好有趣的领域。对于众多的网站或者系统来说，后台提供的功能才是核心模块，但是关乎网站或者系统是否能够持续地吸引用户的眼球，能否在同样类型的产品中脱颖而出，也许前端的交互是否人性化和性能是否稳定高效占了绝大多数因素。良好的用户体验，给他们积极高效的用户体验，甚至改变大众的生活方式，这正是我当初学习编程的初衷。
（面试官也许会问得：是怎么实现这个效果的或者关于用户体验方面你还做过哪些努力，没关系，我认真做了准备。甚至要对比一下css3过渡和动画的区别，鉴于篇幅有限，关于css3的具体使用就不在这里列举，用户体验方面的答案，下面会做回答。）
/*@keyframes 规则用于创建动画。在 @keyframes 中规定某项 css 样式，就能创建由当前样式逐渐改为新样式的动画效果。*/@-webkit-keyframes spin {0% {-webkit-transform:rotate(0deg);}50% {-webkit-transform:rotate(-180deg);}100% {-webkit-transform:rotate(-360deg);}}/*使用 @keyframes 中创建动画，需要把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 css3 动画属性，即可将动画绑定到选择器：规定动画的名称规定动画的时长*/-webkit-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;
具体可以参考：http://www.w3school.com.cn/css3/css3_animation.asp
闻东师兄推荐：http://www.tuicool.com/articles/nbbqjy3
在制作一个web应用或web站点的过程中，你是如何考虑它的ui、安全性、高性能、seo、可维护性以及技术因素的？ （如果问我这个问题，我会很兴奋的，因为可以说半个小时。）
谈谈你喜欢的开发环境。(例如操作系统，编辑器，浏览器，工具等等。) （有两套开发环境，一套是用来平时团队项目的开发，我的jdk、tomcat、photoshop等等都部署安装在wins系统上面；另外一套是用来“装逼”的，呃，对于我这种选择困难症病人，纠结了一下最后决定说说“装逼”的那套开发环境）
操作系统用的是linux的ubuntu，能够是我接触到linux常用命令、下载安装、转移新增删除文件都很方便（面试官会问到哪些指令吗？）
编辑器是brackets，作为免费、开源且跨平台的 html/css/javascript 前端 web 集成开发环境，简约、优雅、快捷！
浏览器是chrome，内部提供的开发工具很丰富，例如单步调试、模拟不同像素设备、能够显示较多css3属性等。
*你最熟悉哪一套版本控制系统？ （这个问题，用过git，用过myeclipse里的svn，用过tortoisesvn将代码上传到sinaapp服务器，但是都不是很熟悉，只好翻了一下《pro.git-zh_cn》）
在git 中的绝大多数操作都只需要访问本地文件和资源，不用连网。对于任何一个文件，在git 内都只有三种状态：已提交（committed），已修改（modified）和已暂存（staged）。已提交表示该文件已经被安全地保存在本地数据库中了；已修改表示修改了某个文件，但还没有提交保存；已暂存表示把已修改的文件放在下次提交时要保存的清单中。　
基本的git 工作流程如下所示：
1. 在工作目录中修改某些文件。
2. 对这些修改了的文件作快照，并保存到暂存区域。
3. 提交更新，将保存在暂存区域的文件快照转储到git 目录中。
常用命令：
//用git 把git 项目仓库克隆到本地，以便日后随时更新：$ git clone git://git.kernel.org/pub/scm/git/git.git//git add 命令告诉git 开始对这些文件进行跟踪，然后提交：$ git add filenme.html//每次准备提交前，先用git status 看下，是不是都已暂存起来了，然后再运行提交命令$ git commit -m 'initial project version'// 把本地仓库提交到远程仓库的master分支中$ git push origin master
你能描述一下当你制作一个网页的工作流程吗？ 1）根据需求，确定主题。透彻深入所做网站的核心功能和关键。
2）收集资料。从对比相同类型的网站（惯用而熟悉的样式，用户更乐意接受），参照别人可行的实现方法。3）规划网站。抽离出类似的模块和可重用的部件。如果是响应式网站就需要设定断点，根据不同宽度屏幕设定样式。4）设计数据库。5）搭建基本的框架。引入重置样式表reset.css和字体样式表font.css，风格统一的图标还有后台需要用到的包。6）编码和调试。注意统一命名和编码规范。当多人开发时，还需要制定规范文档。7）上传测试。利用ftp工具，把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。 8）推广宣传 。不断宣传，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。
9）维护更新 。网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者
（具体还需要集合我的实际经验：http://www.cnblogs.com/0603ljx/p/4284521.html）
你能描述一下渐进增强和优雅降级之间的不同吗? 它们是看待同种事物的两种观点，它们关注在同一个网站同一功能在不同设备不同浏览器下的表现：
渐进增强，一开始值构建站点的最小特性，然后不断针对个浏览器追加功能，性能越好的设备能够显示更加出众的效果。
优雅降级，一开始就构造站点的完整功能，然后针对浏览器测试和修复。
web标准对可访问性做了如下定义：web内容对于残障用户或者普通的可阅读和可理解性。无论用户是否残障，都得通过用户代理（user agent）来访问web内容。因此要提高可访问性，首先得考虑各种用户代理 ：桌面浏览器、语音浏览器、移动电话、车载个人电脑等等。还得考虑用户访问web内容时的环境限制 。比如：我们真的要考虑浏览器禁用javascript/css的情形吗？我的理解是，要考虑的其实不是禁用了javascript/css的浏览器，而是那些对javascript/css不支持或支持不好的用户代理。比如语音阅读器，手机浏览器等，javascript提供的是一层可访问性，不能代替内容本身。
当然，从渐进增强的角度讲，鼓励使用高级特性，只是同时要做到优雅降级，让低端用户代理上，也能保留低保真的体验。（除了用户代理，还有什么方法检测客户端设备？特性检测，css3媒体查询）
(讲讲我在平时项目中，在“渐进增强”和“优雅降级”的努力)
如果提到了特性检测，可以加分。
假若你有5个不同的 css 文件, 加载进页面的最好方式是?
文件拼合，减少http请求。 用一个大的css文件替代多个小体积的css文件这是一个很好的实践，可以获得更好的可维护性，但是在网站性能方面会产生一定的影响（这里指的是随着文件体积的增大，随之消耗服务器的内存也会增加）。尽管你应该把css文件拆分成小块，但是当浏览器请求这些文件时，会产生同等数量的http请求。每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟。因此，如果你有4个javascript和3个css文件在页面中被加载，你浪费掉了7次因网络往返过程产生的时间。在美国，延迟平均是70毫秒，这样你就浪费了7*70 = 490毫秒，大致延迟了半秒的时间。在美国之外的国家访问你的页面，平均延迟大约是200毫秒，这意味着你的页面有1400毫秒的时间是在等待中度过。浏览器在你的css完全加载完成之前是不能很好的渲染你的页面的。因此越多的延迟让你的页面载入越慢。
请解释一下什么是“语义化的 html” 分离结构和表现的另一个重要方式是使用语义化的标记来构造文档内容。一个xhtml元素的存在意味着被标记内容有相应的结构化意义，例如是用来标记段落标记标题标记列表，不能过分使用
语义化的标签往往与默认样式有所联系，像是hx系列 表示标题，会被赋予默认的块级加粗居中样式；,用来区别于其他文字，起到了强调的作用。用来明确告诉你它们的用途。
语义化标签让大家更直观认识标签和属性的用途。语义化的网页，对搜索引擎友好，更容易被搜索引擎抓取，有利于推广。
*你如何对网站的文件和资源进行优化？ 期待的解决方案包括： 文件合并（同上题“假若你有5个不同的 css 文件, 加载进页面的最好方式是？”） 减少调用其他页面、文件的数量。一般我们为了让页面生动活泼会大量使用background来加载背景图，而每个 background的图像都会产生1次http请求，要改善这个状况，可以采用css的1个有用的background-position属 性来加载背景图，我们将需要频繁加载的多个图片合成为1个单独的图片，需要加载时可以采用：background:url(....) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的http请求缩减为1个。
文件最小化/文件压缩 即将需要传输的内容压缩后传输到客户端再解压，这样在网络上传输的 数据量就会大幅减小。通常在服务器上的apache、nginx可以直接开启这个设置，也可以从代码角度直接设置传输文件头，增加gzip的设置，也可以 从 负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站，要慎重考虑。
使用 cdn 托管 cdn的全称是content delivery network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容，解决 internet网络拥挤的状况，提高用户访问网站的响应速度。
缓存的使用 ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的等待服务器处理->处理完毕返回，这个期间客户端浏览器不能干任何事。
异步：脚本允许页面继续其进程并处理可能的回复。请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
若要在使用ajax请求后处理发送请求返回的结果，最好使用同步请求。
css 相关问题：
css 中类(classes)和 id 的区别。 在样式表定义一个样式的时候，可以定义id也可以定义class。
1、在css文件里书写时，id加前缀#；class用.
2、id一个页面只可以使用一次；class可以多次引用。
3、id是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。 目前的浏览器还都允许用多个相同id，一般情况下也能正常显示，不过当你需要用javascript通过id来控制div时就会出现错误。
描述下 “reset” css 文件的作用和使用它的好处。 reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。比如说ie浏览器和ff浏览器下button显示不同，通过reset能够统一样式，显示相同的想过。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。
比如说，
1）我们不应该对行内元素设置无效的属性，对span设置width和height，margin都不会生效的。
2）对于absolute和fixed定位的固定尺寸（设置了width和height属性），如果设置了top和left属性，那么bottom和right，margin和float就没有作用。
3）后面设置的属性将会覆盖前面重复设置的属性。
期待能够指出它的负面影响，或者提到它的一个更好的替换者normalize normalize.css是一个可以定制的css文件，它让不同的浏览器在渲染元素时形式更统一。
解释下浮动和它的工作原理。 问题成因：在一个容器中，有两个浮动的子元素，会造成显示结果意想不到的问题。在css规范中，浮动定位不属于正常的页面流，而是独立定位的。
关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。
解决浮动：
1）添加额外标签
在浮动元素末尾添加一个空的标签例如
。
优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。
2）使用 br标签和其自身的 html属性
优点：比空标签方式语义稍强，代码量较少
缺点：同样有违结构与表现的分离，不推荐使用
3)父元素设置 overflow：hidden
通过设置父元素overflow值设置为hidden；在ie6中还需要触发 haslayout ，例如 zoom：1。
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；overflow:hidden会导致中键失效。
4)父元素设置 overflow：auto 属性。同样ie6需要触发haslayout，演示和3差不多
优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；ie中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等。
5）使用:after 伪元素
需要注意的是 :after是伪元素（pseudo-element），不是伪类（某些css手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。由于ie6-7不支持:after，使用 zoom:1触发 haslayout。
.clearfix:after {content:.; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
优点：结构和语义化完全正确,代码量居中
缺点：复用方式不当会造成代码量增加
描述z-index和叠加上下文是如何形成的。 　z-index就是控制元素在页面的中的叠加顺序，z-index值高的元素显示在z-index值低的前面。z-index的使用条件：只对有 position 属性的且值不为static的元素才有效。叠加上下文和“堆栈上下文”有关，一组具有共同双亲的元素，按照堆栈顺序一起向前或向后移动构成了所谓的堆栈上下文。
一个元素的堆叠顺序，不仅仅取决于它自身的z-index，更要看它所处在的堆栈上下文，如果所处的上下文的层级很低，即使他本身的z-index设置的很高，也无法实现你的要求。
　z-index解析规则都是基于标准的符合w3c规范的浏览器，但ie系列的浏览器总是让你要多费一番功夫。
ie中z-index跟标准浏览器中的解析有一个小小的区别，那就是上面说的产生堆栈上下文中的三个条件中，对第二个条件的支持的区别，在标准浏览器中元素必须是有z-index值的同时要有position属性，且值不为static，满足这两个条件，才会产生一个新的堆栈上下文，但低版本的ie中就不管这么多了，只要你设置了position值不为static，他就会生成一个新的堆栈上下文。
列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。 答案为可参考上题“解释下浮动和它的工作原理”
解释下 css sprites，以及你要如何在页面或网站中实现它。　 css sprites其实就通过将多个图片融合到一副图里面，然后通过css的技术布局到页面上。这样做的好处是，减少图片数量，将会减少http的请求，提升网站性能。
1）在photoshop新建背景透明的画板，将小图片依次摆放在画板中，调整小图片为适当大小。
2）通过标尺记录图片的横坐标纵坐标。
3）编写css代码background:url(....) no-repeat x-offset y-offset;同时设定元素固定高度和宽度，overflow:hidden
你最喜欢的图片替换方法是什么，你如何选择使用。　 不论是对浏览者还是对搜索引擎，文字都是最佳的页面内容展示方式，但是，由于字体等原因的限制，纯文字的展示渐渐无法满足爱美的设计师的要求。
于是，出现了通过css来实现用图片替换文字的方法，这种方式既能实现页面上各种丰富的效果，又能满足搜索引擎优化的需要。
fahrner image replacement (fir) phark 的方法 gilder/levin 的方法 (推荐) fahrner image replacement (fir)
这是最早出现的图文替换技术，是由 todd fahrner 提出的，非常容易理解：
hello world
h2 { background:url(hello_world.gif) no-repeat; width: 150px; height: 35px; } span { display: none; }
代码非常明白：先将图片应用在 h2 的背景中，然后将 span 的标签隐藏。但是这种方式有个问题，就是当图片无法显示时，将导致这个区域没有任何内容。同时，使用 display:none 的方式隐藏的内容，将被许多主流屏幕阅读器忽略，从而造成可用性问题，因此，应该尽量避免使用。
phark 的方法
hello world
h2 { text-indent: -5000px; background:url(hello_world.gif) no-repeat; width: 150px;height:35px; }
代码也非常简单，通过文本缩进，将文字隐藏，但是，当图片无法显示时，依然存在 fir 的问题。
gilder/levin 的方法
hello world
h2 { width: 150px;height: 35px; position: relative; } h2 span { background: url(hello_world.gif) no-repeat; position: absolute; width: 100%; height: 100%; }
首先，将 h2 的 position 设为 relative ，这样将使 h2 里面的元素定位以 h2 为参照，然后将 span 元素绝对定位，撑满整个 h2 区域，同时将背景图应用在 span 标签里面；这种方法的原理是将 span 标签覆盖在文字内容上面，一旦 span 里面的背景图无法显示，将显示下层的文字内容，不影响正常使用。但是，此方法也有一个缺陷，就是背景图不能透明，否则将透出下面的文字。
讨论css hacks，条件引用或者其他。 hacks
_width针对于ie6。*width,+width针对于ie6,7。
color: red\9;/*ie8以及以下版本浏览器*/（但是测试可以兼容到ie10。
*+html与*html是ie特有的标签, firefox暂不支持.而*+html又为ie7特有标签（但是测试*html兼容ie6-10。*+兼容ie7-10）。
!important 在ie中会被忽视，ie6,7,8不识别，ie9+（包括ie9）是识别的。
条件引用
除ie外都可识别
如何为有功能限制的浏览器提供网页？ 1）对于那些可以手动开启的功能，可以在页面上增设“用户使用指导”或“帮助手册”，提示用户如何开启相关的功能。（如果你不介意，还可以完全禁掉页面，强制用户使用固定设备，升级版本；哈哈，当年我做的bms就是这样做）
例如，针对使用ie浏览器自带的功能可以限制对网页的浏览，比如activex或者脚本，我们检测到它不可用时，提示用户启用的操作方式。
2）尽量避免当js或者css3失效时，页面不可用的动画效果。
例如，http://www.rippletec.net/网站为了营造一种当页面加载完毕，不同模块滚动到固定位置的绚丽动画效果。应该避免类似的效果，一方面产生繁琐的重绘过程，会消耗浏览器内存，对性能一般的设备可能因为压力过大，卡机或者无法渲染；另外一方面是网站当网站的js不可用时，模块滚动到固定位置的事件没有被触发，用户看到的将会是动画产生之前，最原始的页面状态，无法经行下一步操作。
（首次接触“优雅降级”这个词汇是在《jquery基础教程（第4版）》，不过那时候已经是一年多以前，现在已经记不清当时书上举得例子了，记性差~真心抱歉）
3）应该为绑定异步的元素，设置herf属性。
例如，用户要执行查询某书本详细信息操作，点击“查询”按钮，通过js触发查询该条目的事件，然后采用jquery异步执行操作，在页面固定位置加载相关书本的详细内容。$(.delete).click(function(){$.ajax(//..)})，但是一旦js不可用，或者jquery无发加载的时候，用户将无法顺利执行操作。因此，可以为该操作设置herf属性，当$.ajax()可用时阻止直接跳转，而使用异步；当$.ajax()不可用时，直接跳转到详细信息的页面。
　4）避免依赖脚本验证表单。服务器的表单验证不可避免。
　5）部分浏览器不支持html5新标签，因此，可以用js创建相关标签，然后给它们的css赋予相关属性。
　6）因为iphone并没有鼠标指针，所以没有hover事件。那么css :hover伪类就没用了。但是iphone有touch事件，ontouchstart 类似 onmouseover，ontouchend 类似 onmouseout。所以我们可以用它来模拟hover。使用javascript：
var mylinks = document.getelementsbytagname('a');for(var i = 0; i 根据监视屏幕大小进行设计->（媒体查询，灵活排版，图像结合）
如何优化网页的打印样式？ http://www.jb51.net/web/70358.html
在书写高效 css 时会有哪些问题需要考虑？ 　 1）reset。参照上题“描述下 “reset” css 文件的作用和使用它的好处”的答案。
2）规范命名。尤其对于没有语义化的html标签，例如div，所赋予的class值要特别注意。
2）抽取可重用的部件，注意层叠样式表的“优先级”。
使用 css 预处理器的优缺点有哪些？(sass，compass，stylus，less) （这里我会实话实说）过去一直没有机会接触“预处理器”，缺的不是学习的热情和动力，而是一种会使用到这门高深技术的需求，希望日后参与的项目将会用到这门技术，能够将学习揉入实际开发中。关于css 预处理器，我知道是一种语言用来为 css 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 css 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 css 更见简洁，适应性更强，代码更直观等诸多好处。
描述下你曾经使用过的 css 预处理的优缺点。
如果设计中使用了非标准的字体，你该如何去实现？ 1）图片替代
2）
webfonts (字体服务例如：google webfonts，typekit 等等。)
解释下浏览器是如何判断元素是否匹配某个 css 选择器？ 浏览器会根据css rules 与dom tree 生成render tree。浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。
举个例子，有选择器：
body.ready #wrapper > .lol233
先把所有 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagname 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。
至此这个选择器匹配结束，所有还在集合中的元素满足。
大体就是这样，不过浏览器还会有一些奇怪的优化。为什么从后往前匹配因为效率和文档流的解析方向。
1）效率，找元素的父亲和之前的兄弟比遍历所有儿子快而且方便。
2）关于文档流的解析方向，是因为现在的 css，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。
为什么是用集合主要也还是效率。基于 css rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 css rule 通过集合筛选，比遍历每一个元素再遍历每一条 rule 匹配要快得多。
解释一下你对盒模型的理解，以及如何在 css 中告诉浏览器使用不同的盒模型来渲染你的布局。　 网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，css盒子模式都具备这些属性。   
每个盒子都有：边界、边框、填充、内容四个属性；
每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；
请解释一下 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？ 说到 ie 的 bug，在 ie6以前的版本中，ie对盒模型的解析出现一些问题，跟其它浏览器不同，将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反，是不包括border和padding的。对于ie浏览器，当我们设置 box-sizing: content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 w3c 标准，当它定义width和height时，它的宽度不包括border和padding；对于非ie浏览器，当我们设置box-sizing: border-box; 时，浏览器对盒模型的解释与 ie6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。
使用 * { box-sizing: border-box; }能够统一ie和非ie浏览器之间的差异。
请罗列出你所知道的 display 属性的全部值  display 属性规定元素应该生成的框的类型。
请解释一下 inline 和 inline-block，block 的区别？  都是display 属性规定元素应该生成的框的类型。但是block代表块级元素，元素前后都有换行符；inline是默认的样式，表示该元素被显示为内联元素，元素前后没有换行符号。也就是说，block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。而inline-block代表行内块元素（css2.0新增）。
display:block
1）block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2）block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3）block元素可以设置margin和padding属性。
display:inline
1）inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2）inline元素设置width,height属性无效。
3）inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
 请解释一下 relative、fixed、absolute 和 static 元素的区别  
在用css+div进行布局的时候，一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚，以致经常会出现让人很郁闷的结果。今天研究了一下，总算有所了解。在此总结一下：
先看下各个属性值的定义：
1、static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
3、absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。可通过z-index进行层次分级。
4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。可通过z-index进行层次分级。
static与fixed的定位方式较好理解，在此不做分析。下面对应用的较多的relative和absolute进行分析：
1、relative。定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。
黄色背景的层定位为relative，红色边框区域为其在正常流中的位置。在通过top、left对其定位后，从灰色背景层的位置可以看出其正常位置依然存在。
2、absolute。定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。在将黄色背景层定位为absolute后，灰色背景层自动补上。
3、relative与absolute的主要区别：
首先，是上面已经提到过的在正常流中的位置存在与否。
其次，relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。红色背景层为relative定位，其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute。红色背景层依然定义top:20px；left:20px；但其相对 的元素变为定位方式为absolute或relative的黄色背景层。因此，对于absolute定位的层总是相对于其最近的定义为absolute或 relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位。
除top、left、right、bottom定位外，margin属性值的定义也符合上述规则。
static与定位用的比较少，也比较简单，在此不做分析。
下面对应用的较多的relative和absolute与fixed进行分析：
relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。
absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位，
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
你目前在使用哪一套css框架，或者在产品线上使用过哪一套？(bootstrap, purecss, foundation 等等)  
bootstrap是基于html5和css3开发的，它在jquery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jquery插件。
  bootstrap中包含了丰富的web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。
如果有，请问是哪一套？如果可以，你如何改善css框架？  
请问你有使用过 css flexbox 或者 grid specs 吗？  　  http://www.w3cplus.com/css3/a-guide-to-flexbox.html
http://zh.learnlayout.com/flexbox.html
如果有，请问在性能和效率的方面你是怎么看的？  
为什么响应式设计（responsive design）和自适应设计（adaptive design）不同？ 自适应布局（adaptive layout）
自适应布局（adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。就是说你看到的页面，里面元素的位置会变化而大小不会变化；
你可以把自适应布局看作是静态布局的一个系列。
流式布局（liquid layout）
流式布局（liquid）的特点（也叫fluid)