CSS常见样式问题搜集2·

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

• 作用在行内元素上，实现行元素居中。常常对块级元素设置，作用在块级元素的内联子元素上，内联子元素会在父级块元素中居中。

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

IE盒模型的width和height包含了content和padding，border，W3C盒模型的width和height只包含content。

宽度的计算是这样的：

• W3C盒模型：总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
• IE盒模型：IE盒模型的计算方式和W3C的很相似，但有一点是非常不同的，这就是：填充和边框并不被包含在计算的范围内。
  总宽度 = margin-left + width + margin-right
  这就意味着一旦元素拥有横向的填充和/或边框，实际的内容区域就要扩大来创造出他们占据的空间。

图解：

box-model.gif
具体的事例可以参考这里的文章，这里说的很详细，
参考资料
参考资料2（翻译）

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

box-sizing: border-box
```的作用是将当前元素设置为IE盒模型，主要为了排版计算方便。


4.line-height: 2和line-height: 200%有什么区别?
---
   - ```line-height: 2```表示行高为本身字体高度的两倍，
   - ```line-height: 200%```表示设置行高为父元素字体高度的200%高度。

5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
---
inline-block呈现行内元素的特性，不占据一整行，宽度大小由内容决定，同时又有块级元素的特性，可设置宽高和内外边距。
缝隙的问题是由于两行之间有很多空白字符，浏览器都会当作一个文字。
解决方式：
1. 把html写到一起
2. 将父元素的font-size属性设置为0，再在inline-block元素上设置自身的font-size。

两个inline-block元素不能对齐的问题是由于inline元素默认是基于baseline对齐的，要手动设置vertical-align为:top

6.CSS sprite 是什么?
---
雪碧图|精灵图.
把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能。
> **不过，现在常用的是字体图标的形式去完成页面中的logo图片等需求。
最流行的目前是使用SVG实现**

代码：
---

[sprite代码](http://js.jirengu.com/yidaweyudo/1/edit)

[iconfont代码](http://js.jirengu.com/culeretimu/1/edit)