盒子模型，精灵图（雪碧图），元素“隐藏”方式

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

对齐方式，居中显示；作用在行内元素上；让文本居中。

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

后者在高度和宽度上，不包含border和padding。

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

整体的元素都使用盒子的模型。

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

line-height:2 :根据子元素字体的大小计算出行行高的2倍并赋予其元素本身；
line-height:200% ：根据父元素字体大小计算子元素大小的2倍并赋予其元素本身。

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

1. 行内非替换元素，比如span、a等行内标签，正常情况下士不能设置宽高的，加上该属性之后，就可以触发让这类标签表现得如块级元素一样，可以设置宽高；

2. 去除缝隙的方法有两种：
   1> .在代码中两个元素之间不使用换行，直接连写；
   2> .对于行内元素或包括行内块元素，在父元素中使用‘font-size:0;’，然后在inline-block的元素上再重新设置字体;
   3>. 设置浮动，CSS 中，任何元素都可以浮动,浮动元素会生成一个块级框，而不论它本身是何种元素；如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄，使用：float：left，使元素相对无间隙。

（行内元素之间是肯定会有间隙的，浏览器解析的时候，会把行内元素或包括行内块元素之间的回车换行符解析成一定的间隙，间隙的大小跟默认的字体大小设置有关；）

3. 使用垂直对齐，vertical-align: top;属性

6.CSS sprite 是什么?

精灵图（雪碧图），将多个小图片合并成一个大图形式，从而减小请求数量，加快加载速度。
缺点：大小根据图片大小而定，无法缩放，只能通过css设定显示大小；不易修改，如果设计更改，则需要重新加入更改精灵图，每次需求更改都需要修改。

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

1.不占用位置，display:none; 消失；
2.视觉上消失：
1） 隐藏元素，使用visibility:hidden;用户不可见；
2） 设置透明度，使用opacity:0;使元素与背景色一致。