CSS常见样式（2）

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

• 作用在行内元素上
• 让文本水平居中

---

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

---

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

设置 box-sizing:border-box 的元素可以使用IE盒模型
默认(设置 box-sizing:content-box 即为W3C盒模型)

---

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

line-height: 2——————行高为当前元素字体大小的2倍
line-height: 200%————行高为父容器字体大小的2倍

---

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

（1）

inline-block 可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。

（2）

（3）

**行内元素以文字底部对齐** **添加vertical-align:top** **bottom**

---

CSS sprite 是什么?

CSS精灵图或雪碧图，是一种通过把需要请求的图片整合为一张图片然后用css获取需要区域的方法。
优点：可以减少对图片请求次数，提高网页加载性能，减少服务器的运算压力。
缺点：图片不能缩放，每次需要新加入图片就要重新做一张整合图。

---

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

方式	区别
opacity:0	设置整体透明度为0 ， 占空间
display:none	设置消失，不占空间
visibility:hidden	设置隐藏，和opacity类似，占空间
background-color:rgba(0,0,0,0)	设置背景透明度为0

---

使用 CSSsrpite 实现如下效果

代码：http://js.jirengu.com/yetehisexu/1/

---

在iconfont上[搜索"饥人谷"]， 使用字体图标实现代码1中的效果

代码：http://js.jirengu.com/qafeteyela/1/