任务9

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

作用是使元素居中；作用在行内元素上；能让块级元素里的行内元素水平居中，并且行内元素里的文本也可以居中。

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

• IE盒模型的宽高：包含了border,padding,content的值。
• W3C盒模型的宽高：content的值。

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

设置为IE盒模型，IE盒模型的宽高包含了border,padding,content的值。使用该属性，设置盒模型的宽高时，不用去考虑内部的计算，因为设置border，padding也不会增加该盒模型的宽高。

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

• line-height: 2：设置行高为元素本身字体大小的两倍，无论字体大小，后代都会继承两倍行高这个关系
• line-height: 200%：设置行高为其父元素字体大小的两倍，后代只会继承固定的行高，不会继承两倍的行高。

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

• 具有内联和块级元素的特性：不会占据一整行；可以设置宽高，margin,padding。
• (1)标签不换行
  (2)设置父元素字体大小为0，然后单独设置字体大小
• vertical-align: top;

CSS sprite 是什么?

CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。 其优点在于：

• 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
• 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
• 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
• 更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。

其缺点在于：

• 图片合成比较麻烦；
• 背景设置时，需要得到每一个背景单元的精确位置；
• 维护合成图片时，最好只是往下加图片，而不要更改已有图片。

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

1. opacity: 0; 改变元素的透明度，使其无法被看见，但仍会影响布局，并且元素本身可以与用户交互。
2. visibility: hidden; 改变元素的可见性，使其无法被看见，但仍会影响布局，元素本身不可以与用户交互。
3. display: none; 隐藏元素，被隐藏的元素不会占据任何空间，但仍可通过DOM来操作。
   另外设置background-color: rgba(a,b,c,0) 可以修改背景色的透明度。