入门任务9

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

text-align作为HTML元素属性其主要是用来文本水平居中的。text-align属性定义行内内容（例如文字）如何相对它的块父元素对齐，它并不控制块元素自身的对齐，只控制块元素行内内容的对齐。

• text-align:center的意思是块级元素中的行内内容居中。
• 作用在block-level元素上(包括了block和inline-block);
• 能让block-level的元素中的行内元素，替换元素和inline-block元素居中。

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

W3C盒模型中的padding,border所占的空间不在width，height计算范围之内，而IE盒模型width包含content尺寸+padding+border。

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

此元素的内边距和边框不再会增加它的宽度，宽度、高度=content尺寸+padding+border，实现类似于IE盒模型的功能。

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

line-height: 2表示行高是其本身文字高度的2倍；
line-height: 200%表示其父元素文字高度的2倍；
line-height:2 在继承关系中页面所有元素都会以自身文字高度2倍进行继承；
line-height:200% 在继承关系中会先计算具体的行高，页面元素继承计算后得到的行高；

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

特性
既呈现inline特性（不占据一整行，宽度由内容宽度决定），又呈现block特性（可以设置宽高，内外边距），可以设置他text-align属性，可以用vertical-align设置垂直对齐。
去除缝隙
在源代码中删除空白字符
在其父元素或祖先元素中设置font-size:0;然后再设置其自己需要的字号
顶端对齐
样式设置为vertical-align:top;

CSS sprite 是什么?##

CSS Sprites，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。CSS Sprites能减少图片的字节，能很好地减少网页的http请求，从而大大的提高页面的性能。缺点就是无法缩放，不好修改。

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

• opacity:0 整体透明度为0
• visibility:hidden；和opacit类似
• display:none;消失，不占位置
• background-color：rgba(0,0,0,0)背景色透明

代码##

css sprites 示例
iconfont 示例