CSS
Q: HTML引入CSS的方式有哪些？
A: HTML element的style属性，HTML内部style标签引入，HTML外部link标签引入，CSS代码import引入。
Q: png、jpg、gif三种图片格式如何选择，你还知道哪些图片格式？
A: 颜色简单、有透明的用png、颜色丰富(照片)用jpg，有动画的用gif。图片格式还有webp、svg等等。
Q: 什么是盒子模型？
A: 由内到外：content-box、padding-box、border-box、margin-box，默认width、height是content-box的宽高，IE怪异模式下width、height是border-box的宽高。
Q: 解释box-sizing: border-box的作用。
A: 设置width、height为border-box的宽高。
Q: 什么是margin折叠？
A: 同一个BFC内的文档流里的多个相邻(兄弟和父子)块级元素的垂直方向的margin合并成一个。
Q: 计算如下margin宽度折叠后的margin宽度：(3px, 5px)，(3px, -5px)，(3px, 5px, -4px)，并说明计算方法。
A: 5px， -2px，1px。计算方法是正值的最大值加上负值的最小值。
Q:
<div style="font-size: 10px">
<p style="font: 2em/2em arial">test</p>
</div>
说出以上代码里p元素的font-size和line-height的computed value，并解释原因。
A: p元素的font-size为20px，line-height为40px，em相对于自身的font-size或继承的font-size。
Q: em和rem的区别是什么？
A: em相对于自身的字体大小，而rem相对于root element(html)。
Q: 描述一下选择器的优先级。
A: 先比较选择器里id选择器的个数，如果相同则比较class选择器的个数，如果还相同就比较type(tag)选择器的个数。
Q: inline、block、inline-block的区别是什么？
A: inline元素和其他inline元素在同一行展示，宽度由内容决定，无法设置宽度；block元素在新行开始，默认宽度为容器的宽度，可以设置宽度；inline-block是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内敛元素的增强。
。
Q: 什么是clearfix？写出clearfix的代码。
A: float的元素不在文档流里，无法撑开容器，clearfix就是为了解决这个问题。可以用overflow:hidden，也可以在容器末尾加一个空div并设置clear:both，还可以用如下代码：
.clearfix:after {
content: '';
display: block;
clear: both;
}
Q:
<div>
<img src="...">
<p>text</p>
</div>
以上文档结构，如果设置img为float:left则p的文字会在图片的右边展示，如果文字很长则会绕到图片的下方，给出一个方案让文字都在图片的右边不绕到图片的下边，且p需要占满图片右边的空间，并解释原因。
A: 给p设置overflow:hidden，原理是给p生成新的BFC。
Q: 如何做水平和垂直居中？给出几种方案。
A: 方案一，已知宽高，设为absolute，然后left、top都设为50%，根据宽高设置负margin来居中；方案二，类似方案一，最后一步用transform: translate(-50%,-50%)；方案三，绝对定位，top、bottom、left、right都设为0，设好宽高，margin设为auto；方案四，display:table-cell + vertical-align:middle。
Q: transition、animation、transform有什么区别？
A: transition和animation用来做动画的，transition是从一个状态过度到另一个状态，而animation是按照keyframes来做动画。transform用来做位移和变形的。
JS
Q: 给出如下代码的输出并解释原因：
var a = 1;
function f() {
console.log(a);
var a = 2;
}
f();
Q: 输出undefined，因为变量定义会提前到函数开头(hoisting)。
Q: 什么是作用域链(scope chain)？可举例说明。
A: 几个要点：作用域的范围是函数，函数嵌套函数，查找变量从内层函数依次向外层找，最后找不到在window上找。
Q:
function A() {
this.a = 1;
}
function B() {
this.b = 2;
}
写出让B原型继承A的代码。
A: B.prototype = new A;
Q: 什么是原型链(prototype chain)？可举例说明。
A: 上一题的例子
var b = new B;
// b.b == 2
// b.a == 1
b.b在b自己的属性上找，b.a自己的属性里没找到则去b的原型即b,__proto__也就是B.prototype里找，一层一层往上找，到null为止，b.__proto__.__proto__是Object.prototype，b.__proto__.__proto__.__proto__为null。
Q: 找出以下代码的错误，并改正：
function A(a) {
this.x = a;
var get = function() {
return this.x;
}
this.print = function() {
console.log(get());
}
}
a = new A(1);
a.print();
A: 在print被调用时，get函数里的this为window，有2种改正方法：
var that = this;
var get = function() {
return that.x;
}
或者
var get = function() {
return this.x;
}.bind(this);
Q: 解释call、apply、bind的区别，可举例说明。
A: call和apply都是调用一个函数，并指定this和参数，call和apply第一个参数都是指定的this的值，区别在于call第二个参数开始的参数是替换的参数，而apply的第二个参数是一个数组。bind是由一个函数创建一个新函数，并绑定this和部分参数，参数形式和call类似。
Q: ajax和jsonp哪个可以跨域，原理是什么？
A: ajax默认无法跨域，xhr2新增的CORS让ajax也可以跨域，需要输出http头(Access-Control-Allow-Origin)。jsonp可以跨域， 原理是script元素的src可以跨域。
Q: 描述事件捕获和事件冒泡的顺序。
A: 先从外向内捕获，然后从内向外冒泡。
Q: 描述事件委派(delegation)的原理和优点。
A: 原理是在容器节点上绑定事件，利用冒泡，判断事件是否在匹配指定的选择器的节点上被触发。优点是只用绑定一次，不用对每个目标做绑定，还有对动态插入的节点也生效，无需重新绑定。
Q: 有哪些触屏事件？
A: touchstart，touchmove，tauchend，touchcancel
Q: 为什么老版本的webkit的click事件有300ms延迟？fastclick.js
A: 为了支持双击放大，如果300ms以内有两次点击则触发放大操作，而不是click。chromium较新版本在没有双击放大的页面去掉了click事件的300ms延迟。
Q: 为什么cookie的容量比localStorage小？
A: 因为cookie会附带在http请求的header里，如果容量大会有性能问题。
Q: 描述application cache更新的过程。
A: 第一次访问缓存manifest文件里列的文件，之后访问先加载缓存，在后台加载manifest文件按字节对比看是否有变化，如果没变化则说明缓存未失效，否则在后台按列表更新缓存，在下一次刷新页面的时候使用新的资源。
Q: classList和dataset分别是什么？
A: classList类似className，区别是className是空格隔开的字符串，而classList是一个类数组对象，有add、remove、toggle方法。dataset是获取以data-开头的属性的方法。
Q: 描述history.pushState的作用。
A: 无刷新的新增一个历史记录，第一个参数是记录绑定的数据，第二个参数是标题(很多浏览器都忽略了)，第三个参数是新的URL。
前端面试题1
HTML
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
（1）<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，
用什么文档类型 规范来解析这个文档。
（2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 DOCTYPE 非常详尽的学习文档： https://hsivonen.fi/doctype/
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，
比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气）
块级元素有：divulollidldtddh1h2h3h4…p
（3）知名的空元素： <br><hr><img><input><link><meta> 鲜为人知的是： <area><base><col><command><embed><keygen><param><source><track><wbr>
link 和@import 的区别是？
1.link属于XHTML标签，而@import是CSS提供的;
2.页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3.import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
4.link方式的样式的权重高于@import的权重.
浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
常见兼容性问题？
1.png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
2. 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
3.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{float:left;width:10px;margin:0 0 0 10px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别) 渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 css.bb{background-color:#f1ee18;/*所有识别*/.background-color:#00deff\9;/*IE6、7、8识别*/+background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/}
4.IE下,既可以使用获取常规属性的方法来获取自定义属性, 又可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性.
5.IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
6.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust:none; 解决. 如果这一属性也不成 使用 transform:scale 来实施
7. 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active样式了
解决方法是改变CSS属性的排列顺序:LoVe-HA:a:link{}a:visited{}a:hover{}a:active{}
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
1. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
2. IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> 3. 如何区分： DOCTYPE声明\新增的结构元素\功能元素
你如何理解HTML结构的语义化
去掉或样式丢失的时候能让页面呈现清晰的结构： html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页. 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）
使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页. 语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面. 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问. 你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记. 因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.SEO主要还是靠你网站的内容和外部链接的。
便于团队开发和维护 W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。
iframe有那些缺点？
1.iframe会阻塞主页面的Onload事件；
2.iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript 动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
3.iframe 会降低页面整体性能， 之前QQ空间的数据是页面每新增一个iframe，性能下降10%。 更多详细内容， 参见知乎问答： http://www.zhihu.com/question/20653055
请描述一下 cookies，sessionStorage 和 localStorage 的区别？ webstorage和cookie的区别
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会 sessionStorage和localStorage的存储空间更大；达5M之多，而cookie只有4k。 sessionStorage和localStorage有更多丰富易用的接口； sessionStorage和localStorage各自独立的存储空间； WebStorage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，WebStorage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而WebStorage仅仅是为了在本地“存储”数据而生。
描述application cache更新的过程
第一次访问缓存manifest文件里列的文件，之后访问先加载缓存，在后台加载manifest文件按字节对比看是否有变化，如果没变化则说明缓存未失效，否则在后台按列表更新缓存，在下一次刷新页面的时候使用新的资源。
classList和dataset分别是什么？
classList类似className，区别是className是空格隔开的字符串，而classList是一个类数组对象，有add、remove、toggle方法。dataset是获取以data-开头的属性的方法。
描述history.pushState的作用
无刷新的新增一个历史记录，第一个参数是记录绑定的数据，第二个参数是标题(很多浏览器都忽略了)，第三个参数是新的URL。
如何实现浏览器内多个标签页之间同域页面的通信?
调用localstorge、cookies等本地存储方式
webSocket如何兼容低浏览器
AdobeFlashSocket
请列举几种压缩HTML文件大小的方式
考察对html结构理解的深浅程度 collapseBooleanAttributes:true,collapseWhitespace:true,conservativeCollapse:true,removeAttributeQuotes:true,removeCommentsFromCDATA:true,removeEmptyAttributes:true,removeOptionalTags:true,removeRedundantAttributes:true,useShortDoctype:true[参见](https://github.com/kangax/html-minifier)
div+css的布局较table布局有什么优点？
改版的时候更方便 只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前
谈谈URL的编码与解码
参见： http://www.cnblogs.com/webcc/archive/2012/06/08/2541894.html
Quirks模式是什么？它和Standards模式有什么区别
从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差，IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？
在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。
区别：
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了padding和border。
设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0auto设置水平居中：使用margin:0auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是看文章看的，甚至完全不知道。）
img的alt与title有何异同？b：strong与em的异同？
alt(alttext):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成tooltip显示)title(tooltip):该属性为设置该属性的元素提供建议性的信息。 strong:粗体强调标签，强调，表示内容的重要性 em:斜体强调标签，更强烈强调，表示内容的强调点
简述一下src与href的区别。由此衍伸为啥script的引入使用src，css的引入使用href的。
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。<scriptsrc="js.js"></script>当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。href是HypertextReference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<linkhref="common.css"rel="stylesheet"/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
网页制作会用到的图片格式有哪些
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp,Apng。（是否有关注新技术，新鲜事物）
科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。FacebookEbay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。Apng：全称是“AnimatedPortableNetworkGraphics”, 是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOSsafari 8的支持，有望代替GIF成为下一代动态图标准。
请谈一下你对网页标准和标准制定机构的重要性的理解。
网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。
知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？
微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）
一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
CSS
什么是margin折叠？计算如下margin宽度折叠后的margin宽度：(3px, 5px)，(3px, -5px)，(3px, 5px, -4px)，并说明计算方法。
同一个BFC内的文档流里的多个相邻(兄弟和父子)块级元素的垂直方向的margin合并成一个。
5px， -2px，1px。计算方法是正值的最大值加上负值的最小值。
如何做水平和垂直居中？ 给出几种方案
方案一，已知宽高，设为absolute，然后left、top都设为50%，根据宽高设置负margin来居中；方案二，类似方案一，最后一步用transform: translate(-50%,-50%)；方案三，绝对定位，top、bottom、left、right都设为0，设好宽高，margin设为auto；方案四，display:table-cell + vertical-align:middle。
transition、animation、transform有什么区别？
transition和animation用来做动画的，transition是从一个状态过度到另一个状态，而animation是按照keyframes来做动画。transform用来做位移和变形的。
指出以下代码中p元素的font-size 和 line-height的computed value, 并解释原因
<divstyle="font-size: 10px"><pstyle="font: 2em/2em arial">test</p></div>
p元素的font-size为20px，line-height为40px，em相对于自身的font-size或继承的font-size。
介绍一下CSS的盒子模型？
1. 有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding; 2. 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul<li）
6.后代选择器（lia）
7.通配符选择器（ * ）
8.属性选择器（a[rel= "external"]）
9.伪类选择器（a:hover,li:nth-child）
可继承的样式： font-sizefont-familycolor,ULLIDLDDDT; 不可继承的样式：borderpaddingmarginwidthheight; 优先级就近原则，同权重情况下样式定义最近者为准; 载入样式以最后载入的定位为准; 优先级为: !important>id>class>tagimportant 比 内联优先级高 CSS3新增伪类举例： p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 :enabled:disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。
CSS常见的hack方法
http://baike.baidu.com/view/1119452.htm
如何居中div？如何居中一个浮动元素？
1. 给div设置一个宽度，然后添加margin:0 auto属性 div{width:200px;margin:0 auto;} 2. 居中一个浮动元素
确定容器的宽高 宽500 高300 的层
设置层的外边距 .div{position:relative;/* 相对定位 */left:50%;top:50%;width:500px;height:300px;/* 高度可以不设 */margin:-150px 0 0 -250px;background-color:pink;/* 方便看效果 */}
列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
1.block 象块类型元素一样显示。 none 缺省值。象行内元素类型一样显示。 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。
2.absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。 relative 生成相对定位的元素，相对于其正常位置进行定位。 static 默认值。没有定位，元素出现在正常的流中 (忽略 top,bottom,left,rightz-index 声明)。 *inherit 规定从父元素继承 position 属性的值。
CSS3有哪些新特性
CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba
为什么要初始化CSS样式, 最简单的初始化方法
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法就是： *{padding: 0;margin: 0;} （不建议）
请先口述对BFC规范的理解, 以下文档结构，如果设置img为float:left则p的文字会在图片的右边展示，如果文字很长则会绕到图片的下方，给出一个方案让文字都在图片的右边不绕到图片的下边，且p需要占满图片右边的空间，并解释原因。
<div><imgsrc="..."><p>text</p></div>
TODO, 添加一份详细答案
给p设置overflow:hidden，原理是给p生成新的BFC。
float属性在IE6下有一个经典的layout错误问题，属于IE6的bug，请描述这个bug和相应的解决办法？
TheIE5/6 DoubledFloat-MarginBug： http://www.positioniseverything.net/explorer/doubled-margin.html
如果需要手动写动画，你认为最小时间间隔是多久，为什么, 即动画的帧率？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms 我补充一下这个答案：
1，多数显示器默认频率是60Hz现在已经不适用，LCD来说则不存在刷新率的问题。
2，动画跟游戏不一样，游戏普遍是每秒60帧。动画一般是每秒25帧。但由于现在做的页面动画更游戏原理更相似，所以每秒60帧也是适用的。
更详细的解释可以参照[知乎回答](http://www.zhihu.com/question/21081976)
display:inline-block 什么时候会显示间隙？
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
清除浮动的常用做法
答案参见： http://blog.csdn.net/baicp3/article/details/24691447
解释CSS属性zoom 和 hasLayout, BFC的概念，比较hasLayout和BFC的异同
答案参见： http://segmentfault.com/q/1010000000367669
延展： http://www.smallni.com/haslayout-block-formatting-contexts/
什么是外边距重叠？重叠的结果是什么？
外边距重叠就是margin-collapse。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
rgba()和opacity的透明效果有什么不同？
