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

W3C盒模型中padding,border所占的空间不在width,height范围内。content-box:width == 内容区宽度
IE 盒模型width包括content尺寸+padding+border
border-box:width == 内容区宽度 + padding宽度 + border宽度

二、line-height: 2和line-height: 200%的区别

都是表示行高是字体大小的两倍，但是当他们放在父级元素上时，有区别：

• line-height: 2是表示子元素的行高是自身高度的2倍，是相对大小。
  若子元素的字体大小不同，行高也会不同
• line-height: 200%浏览器会立即算出行高的具体值，假如父元素的默认字体大小是16px，那么计算的行高就是2*16=32px，子元素的行高都会 继承这个行高，是固定大小。
  若子元素的字体大小不同，行高都是固定的某个值

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

1. 即呈现inline特性（不占据一整行，宽度由内容宽度决定）。又呈现block特性（可设置宽度，内外边距）。

2. ①将标签之间的空格去掉不转行。如<span class="box">hello</span><span class="box">hello</span>
   ②使用font-size:0。如

.wrap{
font-size:0;
}
.box {
display:inline-block;
border: 1px solid;
width: 100px;
font-size: 14px;
}

3. vertical-align: top

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

1. display: none;元素在页面上将彻底消失
2. visibility: hidden;元素在页面消失后，其占据的空间依旧会保留着
3. opacity: 0;将元素的透明度设置为0,依旧占据着空间
4. 将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0
5. 设置元素的position与left，top，bottom，right等，将元素移出至屏幕外
6. 设置元素的position与z-index，将z-index设置成尽量小的负数

五、CSS sprite （雪碧图/精灵图）是什么?

是一种网页图片应用处理方式。允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。