CSS常见样式（下）

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

• text-align: center的作用是让元素水平居中。
• text-align作用在块级元素上。
• text-align可以是行内元素、行内块元素或者文本水平居中。

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

• IE 盒模型width包括padding和border。
• W3C盒模型width不包括包括padding和border，width就是指的内容的宽度。

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

• 使盒模型的padding和border都计算在width里面，也就是IE 盒模型。

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

• line-height: 2表示行高为元素自身字体大小的两倍；
• line-height: 200%表示其后代的所有行高都是200%，是固定的，不会根据子元素自身的字体大小发生变化。

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

• inline-block即有行内元素的特点，也可以设置宽高。
• 使用通配符*{padding: 0;margin: 0;font-size: 0;}即可去掉全局的缝隙；
• 使用vertical-align: top即可使两个元素顶端对齐；

6. CSS sprite 是什么?

• CSS sprite中文名为‘精灵图’，也叫做雪碧图。是把一个个小图标集合在一张图片上，使用图片定位的方法显示某一个图标。减少网站提交数据次数，使网站加载运行更快。

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

• display:none----将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。

• visibility:hidden----visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景。

• opacity: 0----opacity表示元素的透明度，而将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法，元素本身空间不会被占用。

• CSS sprite任务1

• iconfont 任务2