1. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center的作用在块级元素，可以使块级元素内的行级元素和display:inline-block,display:inline元素水平居中。
2. IE 盒模型和W3C盒模型有什么区别?
image.png
image.png
‘
区别：
- W3C盒模型中，width和height只包含content，不包含padding和border。
- IE盒模型中width和height包含content，padding和border。
3. *{ box-sizing: border-box;}的作用是什么？
box-sizing是CSS3中定义的新样式，它有两个属性 content-box 和 border-box，分别代表使用W3C标准盒模型与IE盒模型，默认值是content-box。
box-sizing: border-box; 作用是使用IE盒模型。
4. line-height: 2和line-height: 200%有什么区别?
- line-height: 2是指元素行高为字体高度的2倍。
- line-height: 200%是指元素行高为父元素字体高度的2倍。
- 父元素设置line-height:2 会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。
父元素设置line-height:200%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。
5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
inline-block同时具有块级元素和行内元素的一些特性。既可以像行内元素一样不用独占一行，又可以像块级元素一样可以设置宽高。
去除缝隙的方法有三种：
- 在元素标签之间不换行，防止有空格或换行字符出现。
- 可以给inline-block元素包裹一个父盒子，父盒子设置font-size:0样式，可防止空格或换行字符有宽度。之后再给inline-block元素设置font-size即可。
- 父元素设置dispaly:flex，Flex是Flexible Box的缩写，意为"弹性布局"。注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
高度不一样的inline-block元素顶端对齐方法：
为元素设置vertical-align:top;属性。
6.CSS sprite 是什么?
CSS sprite是指精灵图或者雪碧图。
实际上是把页面上的多个小图片集成在一张大图片上，然后使用大图片作为背景，利用background-position属性，使对应的小图跟盒子对齐即可。
好处是可以减少图片数量，减少对服务器的请求。
7.让一个元素"看不见"有几种方式？有什么区别?
有4种方式：
- opacity: 0 ; 透明度为0，可使盒子透明不可见
- visibility: hidden ; 和opacity:0 类似
- display:none; 消失，不占用位置
- background-color: rgba(0，0，0，0) 只是背景色透明
8. 代码
- 使用 CSSsrpite 实现
http://js.jirengu.com/zayavojuho/2/edit
image.png
image.png
