CSS常见样式2

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

让块元素的行内内容相对于块父元素居中；
作用于块元素上；
让行内元素或者文本元素居中；

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

IE 盒模型大小是以border为边界的
W3C盒模型大小是以content为边界的
W3C盒模型转化为IE 盒模型： border-size:border-box;即可

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

将W3C盒模型转化为IE 盒模型。

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

在继承的时候有区别
2是行高为自身的字高两倍，
200%是行高当时计算，子元素的行高是继承父元素计算好的值。
例：

    <style>
    .father{
      font-size:20px;
      line-height:2;/*line-height:200%; */
    }
    .child{
      font-size:30px;
    }
  </style>

<div clas="father">
     <div class="child"></div>
  </div>

父元素line-height值为2 则子元素line-height值为60px；
父元素line-height值为200% 则子元素line-height值为40px；

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

将对象呈现为inline对象，但是对象的内容作为block对象呈现。
即：既可以同行排列，又可以设置宽高。

去除缝隙的三种方法：
1 父元素设置font-size:0; 子元素重新设置字高。（需要父元素内没有文本元素）
2 注释掉行内元素间空白字符。
3 删除空白字符。

添加vertical-align:top;样式

CSS sprite 是什么?

精灵图。
一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

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

1 opacity:0;
2 visibility:hidden;
3 display:none;

1和2相同点：都占据空间。
1和2不同点：opacity:0;还是可以触发绑定的事件，而visibility:hidden;不能触发绑定的事件。
3不占据空间。
注：background-color: rgba(0，0，0，0.2) 只是背景色透明，而content不透明。所以不能算看不见。