1、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
作用是水平居中，作用在行内元素，让文本元素居中，主要是文字；

2、IE 盒模型和W3C盒模型有什么区别?
ie盒模型的pading 、border的值不是固定的，而content的只是固定的
w3c的padding、border所占的空间不在width、height范围内

Paste_Image.png

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

Paste_Image.png

• content-box 这是由 CSS2.1 规定的宽度高度行为。
  宽度和高度分别应用到元素的内容框.
  在宽度和高度之外绘制元素的内边距和边框。
• border-box 为元素设定的宽度和高度决定了元素的边框盒。
  就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
  通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
• inherit 规定应从父元素继承 box-sizing 属性的值
  1 box-sizing: content-box：w3c标准盒模型
  2 box-sizing: border-box：“IE盒模型”

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

• ine-height设置单行文本的行高
• 2是本身文字高度2倍，200%是父元素文字高度的两倍
• height = line-heihgt ——垂直居中单行文本

5、inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
inline-block为行内块元素，同时兼具行内元素与块级元素的特点
特点：* 和其他元素都在同一行上 类似于行内元素
* 宽度高度均可设置 类似于块级元素
* 宽度高度是自己的文字元素，和父级元素宽高没有关系(http://js.jirengu.com/rokucecote/1/edit）

Paste_Image.png

产生缝隙原因是因为HTML里，两个元素之间有空白，换行空格等，都被浏览器当做一个空白字符。
消除方法：

在包裹两个缝隙元素的div中，设置字体大小为0，这样空白字符高度为0；
在各自元素样式中再设置字体大小
设置了inline-block的元素，具有行内元素的特点，是以文字下面的基线来对齐的，可以通过设置vertical-align：top/bottom来调节是在顶部还是底部对齐

6、CSS sprite 是什么?
css精灵图，也叫雪碧图，是为把很多图片放在一张大的图片上，用来减少网络来回的传输，通过设置图片的位置来显现你想要的图片区域的任何一个位置的区域的内容
7让一个元素"看不见"有几种方式？有什么区别?
隐藏or透明
opacity: 0 ; 透明度为0，整体
visibility: hidden ; 和opacity:0 类似
display:none; 消失，不占用位置
background-color: rgba(0，0，0，0.2) 只是背景色透明

代码一精灵图：http://js.jirengu.com/zemobaqude/1/edit?html,css,output
代码二unicode精灵图：http://js.jirengu.com/dipukutasu/1/edit