CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），变形（transform）

增加了更多的CSS选择器  多背景 rgba，在CSS3中唯一引入的伪元素是::selection，媒体查询，多栏布局

参考《CSS3中的动画效果记录》、《CSS3中border-radius、box-shadow与gradient那点事儿》

 

3.15、为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

 

3.16、解释下 CSS sprites原理，优缺点

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，

再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，

background-position可以用数字精确的定位出背景图片的位置。

优点：

a. 减少网页的http请求

b. 减少图片的字节

c. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名

d. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。

缺点：

a. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂

b. CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置

c. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

 

3.17、解释下浮动和它的工作原理？

a. 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）

b. 浮动元素碰到包含它的边框或者浮动元素的边框停留。

 

3.18、浮动元素引起的问题

a. 父元素的高度无法被撑开，影响与父元素同级的元素

b. 与浮动元素同级的非浮动元素会跟随其后

c. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

 

3.19、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：

以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC。

原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

解决方法：使用LINK标签将样式表放在文档HEAD中。

 

3.20、line-height三种赋值方式有何区别？（带单位、纯数字、百分比）

带单位：px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高

纯数字：把比例传递给后代，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.5*18=27px

百分比：将计算后的值传递给后代

参考《line-height的理解》、《浅析line-height和vertical》，查看在线源码。

 

3.21、:link、:visited、:hover、:active的执行顺序是怎么样的？

L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜欢和讨厌两个词来概括

 

3.22、经常遇到的浏览器兼容性有哪些？如何解决？

a. 浏览器默认的margin和padding不同

b. IE6双边距bug

c. 在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的

d. min-height在IE6下不起作用

e. 透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6

f. input边框问题，去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效

 

3.23、有哪项方式可以对一个DOM设置它的CSS样式？

a. 外部样式表：通过<link>标签引入一个外部css文件

b. 内部样式表：将css代码放在 <style> 标签内部

c. 内联样式：将css样式直接定义在 HTML 元素内部

 

3.24、什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse。

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

a. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

b. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

c. 两个外边距一正一负时，折叠结果是两者的相加的和。

 

3.25、rgba()和opacity的透明效果有什么不同？

a. opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色。

b. 设置rgba透明的元素的子元素不会继承透明效果！

 

3.26、css属性content有什么作用？有什么应用？

css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。

可以配合自定义字体显示特殊符号。

 

四、JavaScript

4.1、请解释一下什么是闭包

闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。

可以把闭包简单理解成 "定义在一个函数内部的函数"，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包有如下特性：

a. JavaScript允许你使用在当前函数以外定义的变量

b. 即使外部函数已经返回，当前函数仍然可以引用在外部函数所定义的变量

c. 闭包可以更新外部变量的值

d. 用闭包模拟私有方法

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题

 

4.2、call 和 apply 的区别是什么？

call 和 apply 就是为了改变函数体内部 this 的指向。

区别是从第二个参数起，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

当参数明确时用call与apply都行, 当参数不明确时可用apply给合arguments

 

4.3、如何使用原生 Javascript 代码深度克隆一个对象（注意区分对象类型）

在网上找了个函数，用递归的方式做复制。传入的参数必须得是Array或Object。

并且用到了和。查看在线代码。参考《》

 

4.4、 jQuery中 $(′.class′)和$('div.class') 哪个效率更高？

jQuery内部使用Sizzle引擎，处理各种选择器。Sizzle引擎的选择顺序是从右到左，所以这条语句是先选.class，

第二个会直接过滤出div标签，而第一个就不会过滤了，将所有相关标签都列出。参考《jQuery最佳实践》

 

4.5、实现输出document对象中所有成员的名称和类型

用一个for in方式循环document，然后在将内容console出来，

就是看到篇文章还会判断document.hasOwnProperty，然后再做打印，我测试了下这样的话打印不出来。

查看在线代码。参考《》

 

4.6、获得一个DOM元素的绝对位置

offsetTop：返回当前元素相对于其 offsetParent 元素的顶部的距离

offsetLeft：返回当前元素相对于其 offsetParent 元素的左边的距离

getBoundingClientRect()：返回值是一个DOMRect对象，它包含了一组用于描述边框的只读属性——left、top、right和bottom，属性单位为像素

参考《JavaScript中尺寸、坐标》，查看在线代码。

 

4.7、如何利用JS生成一个table？

首先是用createElement创建一个table，再用setAttribute设置table的属性，

然后用for循环设置tr和td的内容，用appendChild拼接内容，设置td的时候还用到innerHTML和style.padding。

查看在线代码。参考《》《》

 

4.8、实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px，宽度为50px

先new Image()获取一个图片对象，然后在图片对象的onload中设置宽度和高度。查看在线代码。

 

4.9、假设有一个4行tr的table，将table里面tr顺序颠倒

先是通过table.tBodies[0].rows获取到当前tbody中的行，接下来是两种方法处理。获取到的行没有这个方法。

第一种是将这些行push到另外一个数组中

第二种是用Array.prototype..call()将那些行变成数组，

接着用reverse倒叙，table再appendChild。查看在线代码。

这里我有个疑问，就是在appendChild的时候，并不是在最后把列加上，而是做了替换操作？

 

4.10、模拟一个HashTable类，一个类上注册四个方法：包含有add、remove、contains、length方法

先是在构造函数中定义一个数组，然后用push模拟add，splice模拟remove。

四个方法都放在了上面。查看在线代码。

 

4.11、Ajax读取一个XML文档并进行解析的实例

a. 初始化一个HTTP请求，IE以ActiveX对象引入。 后来标准浏览器提供了XMLHttpRequest类，它支持ActiveX对象所提供的方法和属性

b. 发送请求，可以调用HTTP请求类的open()和send()方法

c. 处理服务器的响应，通过http_request.onreadystatechange = nameOfTheFunction。来指定函数

参考《AJAX》《开始AJAX》，查看在线代码。

 

4.12、JS如何实现面向对象和继承机制？

创建对象方法：

a. 利用json创建对象

b. 使用JavaScript中的Object类型

c. 通过创建函数来生成对象

继承机制：

a. 构造函数绑定，使用call或apply方法，将父对象的构造函数绑定在子对象上

b. prototype模式，继承new函数的模式

c. 直接继承函数的prototype属性，对b的一种改进

d. 利用空对象作为中介

e. 在ECMAScript5中定义了一个新方法，用于创建一个新方法

f. 拷贝继承，把父对象的所有属性和方法，拷贝进子对象，实现继承。参考《》

参考《》《》，查看在线代码。

 

4.13、JS模块的封装方法，比如怎样实现私有变量，不能直接赋值，只能通过公有方法

a. 通过json生成对象的原始模式，多写几个就会非常麻烦，也不能反映出它们是同一个原型对象的实例

b. 原始模式的改进，可以写一个函数，解决代码重复的问题。同样不能反映出它们是同一个原型对象的实例

c. 构造函数模式，就是一个普通函数，不过内部使用了变量，但是存在一个浪费内存的问题。