关于CSS常见样式2

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

text-align: center的作用是使文本居中，作用在行内元素上，能让行内元素中的文本居中。

---

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

• ie678进入怪异模式（不添加 doctype）使用 IE盒模型，宽度 = border + padding + 内容宽度，高度同理。
• chrome， ie9+, ie678(添加 doctype) 使用W3C盒模型， 宽度 = 内容宽度，高度同理。

---

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

• *{ box-sizing: border-box;}的作用是对所有元素应用IE盒模型，指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
• *{ box-sizing: content-box;} 则是设置为W3C盒模型。

---

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

• line-height: 2 的作用是设置行高为本身字体大小的两倍。
• **line-height: 200% ** 的作用是设置行高为父元素字体大小的两倍(200%)。

---

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

1. inline-block有什么特性？

• inline-block 既拥有inline的特性（不占据一整行，所占据的空间为内容宽度），又拥有block的特性（占据整行空间，并可以设置width height）。

2. 如何去除缝隙？

• 方法一： html会将回车符，空格，制表符等识别为一个空白字符，可以将行内元素之间的回车符等空白字符去除。
• 方法二：给inline-block属性元素的父元素设置font-size: 0; 然后再单独设置元素自身的font-size值。

---

3. 高度不一样的inline-block元素如何顶端对齐?

• vertical-align: top; ——元素顶端对齐

---

CSS sprite 是什么?

• css精灵图（雪碧图）就是将多张小图片合并为一张大图，然后用background属性定位到具体位置，这样可以减少网络请求从而提高网页性能。

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

1. opacity: 0; ——透明度为0，仍占据页面位置。
2. visibility: hidden; —— 和opacity: 0; 类似。
3. display: none; —— 消失，不占据页面位置。
4. background-color: rbga( 0, 0, 0, 0.0) ——只是背景色透明，如果有内容这个方法并没有什么用。

代码

1. 代码一

2. 代码二