text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？

让内联元素水平居中。作用于内联元素的父级元素。

IE盒模型和W3C盒模型有什么区别？

当对一个块级元素定义宽度（width）、高度（height）时，在IE盒模型中，这个块级元素的宽度高度为content尺寸+padding+border；在W3C盒模型中，就只是content尺寸大小。

*{box-sizing: border-box;}的作用是什么？

对当前页面所有元素使用IE盒模型。另外的，"content-box"为W3C盒模型。

line-height: 2 和line-height: 200% 有什么区别？

line-height: 2 表示设置当前元素内的字体行间距为自身字体大小的两倍
line-height: 200% 表示设置当前元素内的字体行间距为相对于其父元素的字体行间距的两倍

inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素怎样顶端对齐？

当一个元素设置display=inline-block时，这个元素就同时具有块级元素和行内元素的性质。比如当一个行内元素设置了inline-block时，这时可以设置宽高，并且只占自身宽度空间的大小。

去除缝隙：

• 去掉两个并列元素中间的空格或者回车
• 设置其父元素的字体大小为0

顶端对齐：
在其父级元素中设置vertical-align: top;

另外的vertical-align:bottom(底部对齐)；默认为文字的基线对齐。

CSS sprite 是什么？

CSS 精灵图。将网页中的图片整合为一张大图，减少对服务器的请求，便于浏览器更快的加载。

让一个元素看不见有哪几种方式？有什么区别？

• opacity: 0; 让整个元素的透明度为0，占空间
• visibility: hidden; 规定元素不可见，占空间
• display: none; 让元素消失，不占空间
• background-color: transparent;对于背景颜色，使之为透明

代码

实现1

实现2