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

text-align: center的作用在块级元素，可以使块级元素内的行级元素和display:inline-block,display:inline元素水平居中。

---

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

image.png image.png

‘

区别：

1. W3C盒模型中，width和height只包含content，不包含padding和border。
2. 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%有什么区别?

1. line-height: 2是指元素行高为字体高度的2倍。
2. line-height: 200%是指元素行高为父元素字体高度的2倍。
3. 父元素设置line-height:2 会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。
   父元素设置line-height:200%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

---

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

inline-block同时具有块级元素和行内元素的一些特性。既可以像行内元素一样不用独占一行，又可以像块级元素一样可以设置宽高。

去除缝隙的方法有三种：

1. 在元素标签之间不换行，防止有空格或换行字符出现。
2. 可以给inline-block元素包裹一个父盒子，父盒子设置font-size:0样式，可防止空格或换行字符有宽度。之后再给inline-block元素设置font-size即可。
3. 父元素设置dispaly:flex，Flex是Flexible Box的缩写，意为"弹性布局"。注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

高度不一样的inline-block元素顶端对齐方法：
为元素设置vertical-align:top;属性。

---

6.CSS sprite 是什么?

CSS sprite是指精灵图或者雪碧图。
实际上是把页面上的多个小图片集成在一张大图片上，然后使用大图片作为背景，利用background-position属性，使对应的小图跟盒子对齐即可。
好处是可以减少图片数量，减少对服务器的请求。

---

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

有4种方式：

1. opacity: 0 ; 透明度为0，可使盒子透明不可见
2. visibility: hidden ; 和opacity:0 类似
3. display:none; 消失，不占用位置
4. background-color: rgba(0，0，0，0) 只是背景色透明

---

8. 代码

1. 使用 CSSsrpite 实现
   http://js.jirengu.com/zayavojuho/2/edit

image.png

2. 使用字体图标实现
   http://js.jirengu.com/zayavojuho/4/edit

image.png