---

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

text-align 定义行内内容（例如文字）如何相对它的块父元素对齐，text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐，作用在block和inline-block元素上。
text-align: center; 意思是block或inline-block元素中的inline 和inline-block的元素居中居中。

---

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

W3C标准中padding、border所占的空间不在width、height范围内;
而IE的盒模型width包括content＋padding＋border。

---

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

box-sizing是CSS 3新增属性，*{ box-sizing: border-box;}设置当前页面的所有标签的盒模型为IE盒模型，

---

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

• 计算标准：line-height：2 表示行高为本身字体的两倍高度
  line-height：200% 表示设置行高为父元素字体的两倍高度
• 继承：line-height: 2 继承给子元素的是2这个缩放因子，line-height: 200% 继承给子元素的是200%计算后的值。

---

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

• 既有inline特性（不占据一整行，宽度由内容宽度决定），又有block特性（可设置宽高，内外边距）。
• 将元素的display设置为inline-block之后，元素和元素之间会由于空白字符或代码的换行产生缝隙，可以删去元素之间的字符或取消换行来去除缝隙，也可以用一个div包裹住这些需要处理缝隙的元素，将div元素的font-size设置为0，原理是使容器中的字符大小为0，字符相当于不存在，然后将需要展示的元素的font-size设置为需要的值这样就达到了去除缝隙的效果。
• inline-block使元素具有了行内元素的特性，元素与元素在同一行显示时会以元素内的文本基线作为一个基准点进行对其，将想要顶端对其的元素组合成一个同一类，然后设置其vertical-align为top，就能达到顶端对其的目的。vertical-align是与行内元素和表格绑定在一起的，对块级元素不作用。

---

CSS sprite 是什么?

CSS sprite 又称之为精灵图，把多个小icon合成一个大的图片，使用的时候，元素以这张合成后的大图为背景，通过设置 background-position 的属性来获取指定 icon

• 优点：减少图片的请求，减少http的性能消耗。
• 缺点：由于将多张 icon放到一张png图上，因此在改变背景图大小时background-position不利于计算。

---

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

• display:none ，(脱离文档流 不占据位置)
• opacity:0，（透明但仍然在文档流中）
• visibility:hidden，基本与opacity一致。
• background-color:rgba(0,0,0,0) , 背景色透明

---