css常见样式2

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

text-align: center作用在块级元素上，可以使块内元素的文字、图片、和行内元素水平居中。但不能使块级元素居中。
注意text-align是可继承元素，所以此块级元素的子元素如果是块级元素会继承它的text-align属性。

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

W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border

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

css3新样式box-sizing，box-sizing: border-box：“IE盒模型”，设置的边框包括内容，内边距，边框。

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

• 使用line-height设置单行文本的行高，line-height属性可以继承，设置height = line-height 来垂直居中单行文本
• line-height: 2 是指行高是本身文字高度的2倍 给父元素设置 line-height:Number 之后 这个属性会直接继承给后代元素 后代元素根据自身文字高度去计算行高
• line-height: 200% 是指行高是父容器文字高度的2倍 给父元素设置line-height:百分比 之后 浏览器会立刻计算出这个值 然后把这个值继承给后代元素 例如 给body设置line-height: 200% 浏览器默认文字大小16px 那行高就是32px 后代元素继承的行高就是32px这个值

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

• 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
  又呈现 block 特性 (可设置宽高，内外边距)
  存在缝隙问题：是由于两行之间有很多空白字符，浏览器都会当作一个文字。
• 两段span中间的空隙去掉变成一行，不要留出空白字符或者设置父容器的font-size:0; 然后span子容器再设置font-size数值
• inline元素默认是文字的下基线对齐，设置vertical-align:top；设置顶端对齐，vertical-align适用于行内元素和表格。

CSS sprite 是什么?

• 指将不同的图片/图标合并在一张图上。
• 使用CSS Sprite 可以减少网络请求，提高网页加载性能。

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

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

1.png 2.png 3.png 4.png

代码

使用 CSSsrpite 实现如下效果http://js.jirengu.com/yeza
代码如下：http://js.jirengu.com/yedin/1/edit?html,css,output
在iconfont上搜索"饥人谷"304， 使用字体图标实现代码1中的效果
代码如下：http://js.jirengu.com/sove/1/edit?html,css,output