任务九

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

• text-align：center的作用是使得行内元素的文本水平居中。

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

• IE盒模型的宽高是以边框为基准开始计算的，W3C盒模型是以内容区作为基准计算的。

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

• 使得元素的盒模型变为IE盒模型的形式。

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

• line-height:2是指行高为当前元素的字体像素的两倍。
• line-height:200%是指行高为父元素的字体像素的两倍。

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

• inline-block既有块元素的特性，也具有行内元素的特性，能够设置宽高，内外边距，也不占据一整行，宽度为内容的宽度。
• 设置父元素的font-size为0，然后再把inline-block元素的font-size设置为你想要的字体大小。
• 使用属性vertical-align.

CSS sprite 是什么?

• CSS Sprites叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

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

display：none

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

visibility：hidden

• 设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。

opacity:0

• opacity属性的作用是设置透明度，当值为零是，元素将看不见，隐藏起来。

代码一

代码二