1.text-align：center;的作用是什么？作用在什么元素上，能让什么元素居中。

• text-align:center 是设置在块状元素中，能让内联子元素居中。对于块状元素下的块状子元素无效。

• vertical:align

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

• IE盒模型的内容=width(height)+padding+border

• W3C盒模型的内容=width(height)

3.*{box-sizing:border-box;}的作用？

通用选择器，块状元素采用IE盒模型。

4.line-height:2 和line-height:200%有什么区别？

1. 子元素没有设置行高，子元素才会继承设置的父元素的行高。

2. line-height:2 表示的是自身文本高度的2倍，继承的时候会直接继承为2倍。

3. line-height:200% 表示的是父元素文本大小的2倍，继承时可以理解为先计算父元素字体大小2倍的高度为多少px,然后直接传递的是px。

5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block可以怎样对齐？

• inline-block的特性：

inline-block既有块状元素的特性，可以设置width,height,padding,marging等其他块状元素特性，又有行内元素的特性，可以水平排列，不会独占一行。

• 如何去除缝隙?

  • 写html的时候，两个inline-block的标签中间不要有缝隙。

  • 加一个块元素包裹，并且设置块元素的font-size:0;此处应注意font-size会继承的。

6.CSS sprite

css sprite是将很多小的图标合成到一张大图上，通过调整“视窗”大小及图片的位置来展示同一张图片上不同的icon。能实现这种效果的方法大概有

• img 优点：可以任意放大缩小，兼容性好。缺点：请求过多（本就是为了避开用img)

• sprite
  

  Paste_Image.png

• icon font 使用css:before因为选择器本身，兼容性不好。

ICON FONT

• CSS画

CSS画

• SVG

SVG

这么做的原因是因为，每加载一张不同的图片都会发送一个http请求，虽然对客户端浏览器影响不大，但是过多请求会造成服务端线程增多，压力变大，对于用户来说流量野增加。

7.让一个元素“消失”的办法。

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