前端面试题答案的解答：html+css部分

知乎上一个前端面试题答案的解答：

https://www.zhihu.com/question/19568008

MicroMao ，代码诗人小毛

88 人赞同

自己总结的面试题，感兴趣的看下。

HTML+CSS

1、盒子模型，块级元素和行内元素特性与区别。

2、行内块的使用，兼容性解决。

3、清除浮动的方式以及各自的优劣。

4、文档流的概念、定位的理解以及z-index计算规则&浏览器差异性。

5、CSS选择器以及优先级计算。

6、常用的CSS hack。

7、遇到的兼容性问题与解决方法。

8、垂直水平居中的实现方式。

9、常用布局的实现（两列布局、三列适应布局，两列等高适应布局等）。

Javascript

1、犀牛书封面的犀牛属于神马品种？（蛋逼活跃气氛用。。。）

2、常用的浏览器内核。

3、常用的DOM操作，新建、添加、删除、移动、查找等。

4、String于Array常用方法。

5、设备与平台监测。

6、DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。

7、jQuery的bind、live、on、delegate的区别（考察点与上一条重叠，切入点不同）。

8、JS变量提升、匿名函数、原型继承、作用域、闭包机制等。

9、对HTTP协议的理解。

10、Ajax的常用操作，JS跨域的实现原理。

HTML+CSS

**

1、盒子模型，块级元素和行内元素特性与区别。

**

margin，padding和border

整个盒子的宽度是：（内容宽度 + border宽度 + padding宽度 + margin宽度）之和

css3中可使用border-sizing:

语法 box-sizing: content-box|border-box|inherit;

content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit

规定应从父元素继承 box-sizing 属性的值。

（http://www.w3school.com.cn/cssref/pr_box-sizing.asp）

行内元素与块级函数的三个区别：

1.行内元素与块级元素直观上的区别

行内元素会在一条直线上排列，都是同一行的，水平方向排列

块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上 行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

三、行内元素转换为块级元素

display:block (字面意思表现形式设为块级) http://blog.csdn.net/sykent/article/details/7738408

**

2、行内块的使用，兼容性解决。

**

display:inline-block inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。 HTML中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block会产生了元素间的空隙。 http://www.cnblogs.com/lijinwen/p/5679864.html

兼容性 很遗憾，IE7以下的浏览器不支持inline-block，但并非完全不支持 解决IE6、IE7兼容性的方法：

1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。

2、直接设置display:inline，使用zoom:1触发layout。 兼容所有浏览器的方法是：

display:inline-block; *display:inline; *zoom:1;

**

3、清除浮动的方式以及各自的优劣。

**

http://www.jb51.net/css/173023.html

方法一：添加新的元素 、应用 clear：both；

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

方法二：父级div定义 overflow: hidden

（使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，其区据说在于一个对seo比较友好，另个hidden对seo不是太友好，其他区别我就说不上了，也不浪费时间。）

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

方法三：父级div定义 overflow:auto 、

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

方法四： 父级div定义 伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

```
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:
11b24
30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
```

方法五：父级div 也一起浮动

原理：所有代码一起浮动，就变成了一个整体

优点：没有优点

缺点：会产生新的浮动问题。

方法六：父级div定义 display:table

原理：将div属性变成表格

优点：没有优点

缺点：会产生新的未知问题。

建议：不推荐使用，只作了解。

**

4、文档流的概念、定位的理解以及z-index计算规则&浏览器差异性。

**

文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。

网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。

相对定位vs绝对定位

相对定位 position:relative

故名思意，相对定位就应该是相对于一个东西来定位，而这个东西是什么呢？其实这个东西不是什么，就是元素自己本身，用left right top

b0ttom进行定位后，元素会根据原来的位置进行移动，但由于position:relative这个属性并没有脱离文档流的，所以元素本身所占的位置会保留。

绝对定位 position:absolute

好吧终于有点戏肉了，文档流那复杂的玩意我们先不理，所谓绝对定位，其实也要找个东西来相对来绝对的，而这个东西就是元素的第一个有position，且positon不能为static的祖先元素，是不是有点拗口，换个说法吧，就是这个小鬼（element）的定位可以是他的老爸，他的爷爷，他的太公….（祖先要素）中而且第一个是是有钱的（position:absolute）或者是当官的（position:relative），就是不能是个程序猿（position:static

或者没有设position）的。而且值得注意的是position:absolute这个属性是脱离文档流的，所以重新定位后元素是不会占着原来的位置的

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

层级关系的比较

对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。

对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。

IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。

z-index为auto的元素不参与层级关系的比较，由向上遍历至此且z-index不为auto的元素来参与比较。

http://www.cnblogs.com/ForEvErNoME/p/3373641.html> - 顺序规则：如果不对节点设定 position 属性，位于文档流后面的节点会遮盖前面的

定位规则：

如果将 position 设为 static，位于文档流后面的节点依然会遮盖前面的节点浮动,，所以 position:static 不会影响节点的遮盖关系。

如果将 position 设为 relative (相对定位)，absolute (绝对定位) 或者 fixed (固定定位)，这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点，说明前者比后者的默认层级高。

z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

默认值规则

如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index的值为负数的节点将被没有定义 z-index 的节点覆盖.

从父规则：

如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.

如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.SS选择器以及优先级计算。p://www.cnblogs.com/webblog/archive/2009/07/07/1518274.h

基本选择器

- *

- p

- #id

- .class

组合选择器

- 多元素选择器 div, p

- 后代选择器 div p

- 子元素选择器 div > p

- 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F E + F

CSS 2.1 属性选择器

- E[att]

- E[att=val]

- E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素

- E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，比如“en”、“en-us”、“en-gb”等等

CSS 2.1 中的伪类

- E:first-child: 匹配父元素的第一个子元素

- E:link: 匹配所有未被点击的链接

- E:visited: 匹配所有已被点击的链接

- E:active: 匹配鼠标已经其上按下、还没有释放的E元素

- E:hover: 匹配鼠标悬停其上的E元素

- E:focus: 匹配获得当前焦点的E元素

- E:lang(c): 匹配lang属性等于c的E元素

CSS 2.1中的伪元素

- E:first-line： 匹配E元素的第一行

- E:first-letter： 匹配E元素的第一个字母

- E:before： 在E元素之前插入生成的内容

- E:after： 在E元素之后插入生成的内容

。。。。。。太多了，不粘了

**选择器优先级：**

- 一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择 器的优先级，用100标示ID选择器的优先级。比如上例当中 .polaris span {color:red;}的选择器优先级是 10 + 1 也就是11；而 .polaris 的优先级是10；浏览器自然会显示红色的字。
-
- 浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class='red'的span元素，找到后，再查找其父辈元 素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。
-
- 浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。
- 尽量少使用层级关系
- 使用class代替层级关系

**

6、常用的CSS hack。

**

http://www.3lian.com/edu/2014/10-10/171039.html

一、什么是CSS Hack？ 不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。

CSS Hack常见的有三种形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。

1、属性级Hack：比如IE6能识别下划线””和星号” * “，IE7能识别星号” *“，但不能识别下划线””，而firefox两个都不能认识。

2、选择符级Hack：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。

3、IE条件注释Hack：IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：

7、遇到的兼容性问题与解决方法

。

http://blog.csdn.net/chuyuqing/article/details/37561313

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

在学习浏览器兼容性之前，我想把前端开发人员划分为两类：

第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。

第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。

文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题。（相关文章推荐：主流浏览器CSS 3和HTML

5兼容

- 浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:100%

解决方案：CSS里 *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

碰到频率：60%

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

碰到几率：20%

解决方案：在display:block;后面加入display:inline;display:table;

备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

浏览器兼容问题五：图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

碰到几率：20%

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

浏览器兼容问题六：标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

碰到几率：5%

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

浏览器兼容问题七：透明度的兼容CSS设置

做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

/* CSS hack*/ 我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6

；IE7和遨游；其他（IE8 chrome ff safari opera等）

◆IE6认识的hacker 是下划线_ 和星号 *

◆IE7 遨游认识的hacker是星号 *

比如这样一个CSS设置：

height:300px;*height:200px;_height:100px;

IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt，

所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

*

8、垂直水平居中的实现方式。

*

第一种div绝对定位水平垂直居中【CSS3使用transform】，

transform中translate偏移的百分比值是相对于自身大小的，无论绝对定位元素的尺寸是多少，其都是水平垂直居中显示的，但问题是兼容性不好。IE9+以及其他现代浏览器才支持。IE9之前版本不支持,在IE8模式下，不居中，如图：

div{
width:100px;
height:100px;
left:50%;
right:50%;
position:absolute;
transform:translate(-50%,-50%);
}
``

> 第二种div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，代码两个关键点：
> 1.上下左右均0位置定位；
> 2.margin: auto; 其width、height如何更改都是居中显示的，兼容性可以,IE7及之前版本不支持

div{
width:100px;height:100px;
position:absoulute;
left:0; top:0;bottom:0;right:0;
margin:auto;
}
```

第三种div绝对定位水平垂直居中【要提前知道div宽度与高度的值实现绝对定位元素的居中】，这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。兼容性好

**

9、常用布局的实现（两列布局、三列适应布局，两列等高适应布局等）。

**

http://www.th7.cn/web/html-css/201507/112582.shtml

1. 一列布局
- 居中定宽

body{text-align: center;font-size: 2em;}
.head,.main,.footer{width: 960px;margin: 0 auto;}
.main{background-color: #666666;height: 600px;}
.footer{background-color: #999999;height: 200px;}
-

> 其中，最主要的还是 margin 属性，当为元素设置了宽度，margin:0 auto 就能自动让元素居中。

- 自适应
-

> 只需要将上述 CSS 代码中元素的 width 属性设置为百分比，这样就能让浏览器自动计算元素的宽度。

2. 两列布局
- 定宽
body{text-align: center;font-size: 2em;}
.left{width: 300px;height: 900px;background-color: #eee;float: left}
.right{width: 660px;height: 900px;background-color: #999;float: right;}
`
- 自适应
- 将 width 属性的值替换成百分比
body{text-align: center;font-size: 2em;}
.main{width: 80%;height: 900px;margin: 0 auto;}
.left{width: 30%;height: 900px;background-color: #eee;float: left}
.right{width: 70%;height: 900px;background-color: #999;float: right;}

3. 三列布局
- 左右定宽
- 最主要的是用到了绝对定位，并且让中间的 margin 左右为两边的宽度
body{text-align: center;font-size: 2em;margin: 0;padding: 0}
.main{height: 900px;background-color: #ddd;margin: 0 240px;}
.left{width: 240px;height: 900px;background-color: #eee;position: absolute;top: 0;left: 0}
.right{width: 240px;height: 900px;background-color: #999;position:absolute;top: 0;right: 0}

- 自适应
body{text-align: center;font-size: 2em;margin: 0;padding: 0}
.main{height: 900px;background-color: #ddd;margin: 0 20%;}
.left{width: 20%;height: 900px;background-color: #eee;position: absolute;top: 0;left: 0}
.right{width: 20%;height: 900px;background-color: #999;position:absolute;top: 0;right: 0}
同理，其换成百分比的形式。

4. 混合布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href=""> <style type="text/css">
body{text-align: center;font-size: 2em;margin: 0;padding: 0}
.head,.main,.footer{width: 80%; margin:0 auto;}
.head{background-color: #ccc; height: 100px}
.footer{background-color: #9cc; height: 100px}
.main{position: relative;}
.left{width: 20%;height: 900px; background-color: #eee;position: absolute;top: 0;left: 0; overflow: hidden;}
.middle{height: 900px; background-color: #fcc; margin: 0 20%; overflow: hidden;}
.right{width: 20%; height: 900px; background-color: #eee;position: absolute; top: 0; right: 0;overflow: hidden;}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>  </div>
<div class="footer">footer</div>
</body>
</html>

Javascript

1、犀牛书封面的犀牛属于神马品种？（蛋逼活跃气氛用。。。）

2、常用的浏览器内核。

3、常用的DOM操作，新建、添加、删除、移动、查找等。

4、String于Array常用方法。

5、设备与平台监测。

6、DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。

7、jQuery的bind、live、on、delegate的区别（考察点与上一条重叠，切入点不同）。

8、JS变量提升、匿名函数、原型继承、作用域、闭包机制等。

9、对HTTP协议的理解。

10、Ajax的常用操作，JS跨域的实现原理。

作者：MicroMao

链接：https://www.zhihu.com/question/19568008/answer/23317398

来源：知乎

著作权归作者所有，转载请联系作者获得授权。