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

文本水平居中。作用在块级元素上，能让此块级元素中的内联元素水平居中。

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

W3C盒模型：

总宽度 = margin + border + padding + width

IE盒模型

IE盒模型的计算方式和W3C的很相似，但有一点是非常不同的，这就是：填充和边框并不被包含在计算的范围内。

总宽度 = margin + width

这就意味着一旦元素拥有横向的填充和/或边框，实际的内容区域（content area ）就要扩大来创造出他们占据的空间。

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

box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。
box-sizing: border-box：“IE盒模型”

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

计算方法的区别。
数值：继承的时候，浏览器会先将line-height这个属性继承给子元素，再由子元素计算。
百分数：继承的时候，浏览器会先将行高对应的具体的数值计算出来以后再继承。

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

inline-block是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
缝隙是什么呢，它们是空白符。
要去除空白符产生的间隙，首先要理解空白符归根结底是个字符，通过设置font-size属性可以控制产生的间隙的大小要去除空白符产生的间隙，首先要理解空白符归根结底是个字符，通过设置font-size属性可以控制产生的间隙的大小。设置font-site属性为0px。
高度不一样的inline-block元素默认基线对齐，设置vertical-align：top 实现顶端对齐。

6.CSS sprite 是什么?

想要提高页面的打开速度，最好将图片做的越小越好，提高用户体验。如果是随着时代的发展，网速已经达到完全可以支撑的程度，所以这个时候如果页面上还过多的小图片，就将给浏览器发送过多的请求，造成服务器的压力。我们现在需要将页面上的一些小的图片做成一张大图，将来在页面请求服务器的时候只需要发送一条请求就可以将所有的图片全部拿到。这一张图片就叫做精灵图，也叫雪碧技术。

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

• display:none ，(脱离文档流 不占据位置)
• opacity:0，（透明但仍然在文档流中）
• visibility:hidden，基本与opacity一致。
• background-color:rgba(0,0,0,0) , 背景色透明
• text-indent:让某段文字彻底移走，表面上看不到，但是元素依旧在原地.
• z-index:设置为无限大的值如9999;或-9999让其覆盖或者被其他元素覆盖.(同级)
• 用一个<span>设置为inline-block，设置宽、高并让它移动到某个位置然后设置-背景色为白色，实现一个遮罩的方式。

代码1

代码2