CSS常见样式--续

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

text-align:center是用来使行内元素水平居中的。
background-size（css3的规范，可能会有浏览器兼容的问题）是设置背景图片尺寸，background-size: contain;缩放背景图片以完全装入背景区，可能背景区部分空白；而background-size: cover;缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。

二、IE 盒模型和W3C盒模型有什么区别？

W3C标准中padding、border所占的空间不在width、height范围内。width、height直接指定content的宽高。
　　IE的盒模型width包括content尺寸＋padding＋border。

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

如果使用w3c盒模型，一般我们就需要设置其margin和padding，而IE就不需要设置margin了，padding如果有需要再设置。所以，看起来IE盒模型使用更方便，但是目前的浏览器都采用W3C标准盒模型，为了方便，在CSS3中引入了新样式box-sizing其值有 border-box表示使用“IE盒模型”和content-box：表示使用w3c标准盒模型。

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

line-height:该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
　　line-height: 2，2就是行间距当前字体放大两倍。
　　line-height: 200%，200%是行间距基于当前字体大小而放大2倍。
　　line-height:percentage，是原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值，与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。使用Percentage和em可能会带来意想不到的结果（特别是当父级元素下的子元素字体大小不同时）。
　　line-height:number，该属性的应用值是这个无单位数字number乘以该元素的字体大小。计算值与指定值相同。大多数情况下，使用这种方法设置line-height是首选方法，在继承情况下不会有异常的值。
　　对于替代行内容，如button或者input，若line-height=height，在可以达到垂直居中的作用。

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

inline-block既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)，又呈现 block 特性 (可设置宽高，内外边距，注：对inline设置上下内外边距无效。)，但是会有缝隙问题。
　　如果缝隙产生的原因是空格，则可以通过取消行内元素之间的空格；其次还可以指定其父级元素font-size：0；即设置字的大小为0，再通过指定子元素样式覆盖其父级元素，还原字体大小，但没有被指定的元素（也就是产生缝隙的地方）却没有还原。
　　不同元素高度不一样，可以通过vertical-align：bottom元素及其后代的底端与整行的底端对齐/top元素及其后代的顶端与整行的顶端对齐。
CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

六、css sprite是什么？

css sprite俗称雪碧图，规范的叫法是css精灵图。是指将不同的图片/图标合并在一张图上，还会自动生成css样式。使用CSS Sprite 可以减少网络请求，提高网页加载性能，更方便展示图片直接使用生成样式。在这个网站直接就可以实现：http://spritegen.website-performance.org/
　　当然，由于图片是结合在一起，使用其缺点就是在网页上无法对图片进行缩放；也不能随便修改，否则位置可能会有相对的变化。

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

让一个元素“看不见”，即隐藏起来，我们可以通过设置css属性，有四种属性方式：
1、opacity：透明度，其值可以是从0~1，顾名思义0就是完全透明，1就是不透明。
2、visibility：hidden；和opacity：0；类似。
3、display：none；意即不展示，也不占用位置。
4、background-color： rgb（0，0，0，0.2），其中0.2是透明度，类似opacity；前面三个0，是设置背景色。但只是背景色透明。

八、Demo

方法1、用css sprites制作效果(http://js.jirengu.com/fobebivula/1/edit?html,css,output)
方法2、用image方法制作效果，这个方法比较老，就是试一试，但是图片背景色是黑色是因为图片本身的背景图层就是黑色，用ps就可以改掉。（http://js.jirengu.com/xehamuhafi/1/edit?html,css,output）
方法3、使用字体图标实现效果(http://js.jirengu.com/wevajurizo/1/edit?html,css,output)
步骤：
a、首先在Iconfont-阿里巴巴矢量图标库找到饥人谷图标。
b、把添加到购物车，生成在线链接，复制在线链接到js.jirengu.com。
c、复制的代码就是对图标字体的一种声明，然后使用字体，由于字体比较小，主意指定字体的大小，也可以改变字体的颜色。
d、通过状态选择器E：hevor匹配鼠标放置上的颜色。
总结：方法2生产效率低，请求多，不推荐使用了。方法一和方法三类似，都可以自动生成代码。
　　区别在于方法一还需要调整图片相对位置，如果位置控制的不好，会出现图片在两个状态下，位置发生变化。另外方法一还会有缩放的问题，更改背景大小，就可能会变化背景图片出现的像素的大小。
但是方法三是把图片当成字体，需要对字体进行声明调用，更容易达到“变色”效果。

待更新svg方法····

任务9完