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

答：作用是使行内元素水平居中，作用在块级元素上，将text-align的center应用在一个容器上，它只是针对容器里面的文字以及容器里面的display为inline或者inline-block的容器，如果里面的容器display为block，则里面的容器不会居中。

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

答：

标准盒子模型.png IE盒子模型.png

w3c标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸+padding+border
ie678怪异模式（不添加doctype)使用ie盒模型，宽度=边框+内容宽度+padding
chrome,ie9+,ie678(添加doctype)使用标准盒模型，宽度=内容宽度

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

答：
1.box-sizing:content-box:W3C标准盒模型
2.box-sizing:border-box:IE盒模型
content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型。
border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。

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

答：line-height:2;行高是2倍的文字大小，均以相应的字体为基准。
line-htight:200%;行高是2倍的文字大小，文字大小是指父元素中设定的字体大小。

语法line-height: normal | <number> | <length> | <percentage>
normal 根据浏览器决定，一般为1.2。
number 仅指定数字时（无单位），实际行距为字号乘以该数字得出的结果。可以理解为一个系数，子元素仅继承该系数，子元素的真正行距是分别与自身元素字号相乘的计算结果。大多数情况下推荐使用，可以避免一些意外的继承问题。
length 具体的长度，如px/em等。percentage 百分比，100%与1em相同。
有单位（包括百分比）与无单位之间的区别有单位时，子元素继承了父元素计算得出的行距；无单位时继承了系数，子元素会分别计算各自行距（推荐使用）。

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

答： 特性为：
既呈现inline特性（不占据一整行，宽度由内容宽度决定）
又呈现block特性（可设置宽高，内外边距）
去除缝隙的方法：
1.去掉html标签之间的空格，将html连在一起（实 例:http://js.jirengu.com/nipoz/2/edit)
2.将空白字符的字体大小设置为0；（实例：http://js.jirengu.com/nipoz/3/edit）
高度不一样的inline-block元素顶端对齐的方法为：设置为vertical-align:top;
(实例：http://js.jirengu.com/nipoz/5/edit）

6.CSS sprite 是什么?

CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。
其优点在于：
1.减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2.减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
3.更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。
诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点：
1.图片合成比较麻烦；
2.背景设置时，需要得到每一个背景单元的精确位置；
3.维护合成图片时，最好只是往下加图片，而不要更改已有图片。

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

opacity:0 透明度为0，整体
visibility:hidden;和opacity:0类似
display:none;消失，不占用位置
background-color:rgba(0,0,0,0.0)只是背景色透明