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

text-align: center可以作用于行内元素上，使该元素于行内水平居中。

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

IE盒模型的width包含了左右border、左右padding和主体content的宽度；
而W3C盒模型（即标准盒模型）的width等于content的宽度。

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

将盒模型的border和padding加在width内，相当于将W3C盒模型变成了IE盒模型。

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

当赋予父元素line-height: 2时，子元素会直接继承line-height: 2，再和自身字体大小相乘得到最终行高；
当赋予父元素line-height：200%时，会先计算出父元素的具体行高，子元素直接继承父元素的行高值。

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

inline-block元素既有块级元素可以设置宽高和内外边距的特性，又有行内元素前后不换行的特性。

去除inline-block元素之间的间隙大致有以下几种方法：
1、移除Html标签段之间的空格，类似如下的代码写法：

2、取消标签闭合，单位了兼容IE6/IE7，最后一个标签需要闭合；
3、使用margin负值，具体数值与字体大小有关；
4、使用font-size或letter-space，即在外层添加“font-size: 0;”或“letter-spacing: -2px;”，其中letter-spacing的数值需要根据字体大小调整。

利用vertical-align: top; 可以使高度不一样的inline-block元素顶端对齐。

CSS sprite 是什么?

即我们通常所说的精灵图。
在我们制作较复杂的网页时，可能涉及到很多体积较小的图片，如果分别设置，会增加对服务器的请求数，加重服务器的负担，用户打开网页时也可能会造成加载速度缓慢。
因此，我们将这些图片合并成为一张较大的图片，在网页的特定位置上只需要展示这张大图中对应的位置即可。这样做既能减轻服务器的负担，也能增强用户体验。

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

1、display: none; //直接让元素彻底消失，既不占页面空间，也不会触发点击事件；

2、width: 0; height: 0; overflow: hidden; //设置元素宽高为0，且隐藏元素内的内容和子元素，既不占页面空间，也不会触发点击事件；

3、position: absolute; left: 100%; //设置元素绝对定位，将元素移出屏幕，既不占页面空间，也不会触发点击事件；

4、z-index: -999; //设置元素位于最底层，且必须有其它元素将其覆盖才能实现不可见，既不占页面空间，也不会触发点击事件；

5、visibility: hidden; //此种方法隐藏后元素依然占据页面空间，但无法触发点击事件；

6、opacity: 0; //设置元素完全透明，透明的元素依然占据页面空间，且依然会触发点击事件。