CSS常见样式2

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

text-align:center作用于块级元素上，能让行内元素水平居中

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

IE盒模型的宽度和高度是border+padding+content的值，W3C盒模型的宽度和高度指的就是content的值

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

指定使用IE盒模型，元素的宽高等于border+padding+content。

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

当父元素设置line-height：2时，子元素的行高等于子元素的高度的2倍，是随着子元素的高度变化而变化的，而当父元素设置line-height：200%时，父元素的行高是他自身高度的两倍，子元素的高度也是父元素高度的两倍，是一个定值，不再随着子元素的高度的变化而变化

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

行内元素设置display：inline-block属性时，它会变成行内块元素，有块元素的特性，可以设置宽高值，也仍然保持行内元素的特性，不占据一整行，宽度由内容宽度决定。
取出缝隙的方法：

1. 改变代码的书写方式

<div>
    <span>
    inline1</span><span>
    inline2</span><span>
    inline3</span><span>
    inline4</span><span>
    inline5</span>
</div>

2. 通过css设置父元素的高度为0，然后再为子元素指定高度

  div{
    font-size:0;
  } 
  div span {
    font-size:20px;
    display:inline-block;
  }

<div>
  <span>inline1</span>
  <span>inline2</span>
  <span>inline3</span>
  <span>inline4</span>
  <span>inline5</span>
</div>

高度不一样的inline-block元素，通过设置他们的vertical-align: top可以实现顶端对其

CSS sprite 是什么?

为了减少网络请求，提高网页加载性能，可以将不同的图片/图标合并在一张图片上。

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

1. 通过设置元素的opacity: 0;
2. 通过设置元素的visibility:hidden;
3. 通过设置元素的display:none;
   前两种方式，元素仍然占据他的位置，只是透明度为0或看不见而已，第三种方式，元素已经消失了，不在占据他的位置，后面的元素占据他的位置。

代码任务1效果
代码任务2效果