text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align作用在块级元素上，可以使块内元素的文字、图片、和行内元素水平居中。但不能使块级元素居中,即text-align属性只能针对文本文字和img标签，对其他标签无效。
text-align是可继承元素，所以此块级元素的子元素如果是块级元素会继承它的text-align属性，使子块级元素内的文字或图片或内联元素居中，但是子块级元素不会居中。
IE 盒模型和W3C盒模型有什么区别?
image.png
-
标准盒子模型的宽度和高度是指content的宽度和高度
image.png - IE盒模型的宽度和高度是指border的宽度和高度
{ box-sizing: border-box;}的作用是什么？
- 指定使用IE盒模型，此元素的内边距和边框不再会增加它的宽度。通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width），如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）
line-height: 2和line-height: 200%有什么区别?
line-height:2 是指行高是盒子模型里的content的两倍行高
line-height:200%是指行高是父元素的行高的两倍
inline-block有什么特性？
- 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
- 又呈现 block 特性 (可设置宽高，内外边距)
如何去除缝隙?
有好几种方法可以去除缝隙,下面简单的来说几种:
1.元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就没有了。
<span class="box b1">hello</span><span class="box b2">hello</span><span class="box b3">hello</span><span class="box b4">hello</span>
2.使用font-size:0
先用div把它包裹起来
<div class="wrap">
<span class="box b1">hello</span>
<span class="box b2">hello</span>
</div>
然后
.wrap {
font-size: 0;
}
.space a {
font-size: 12px;
}
3.使用margin的负值:
.box{
width: 100px;
display: inline-block;
border: 1px solid red;
font-size: 14px;
margin: -2px;
}
高度不一样的inline-block元素如何顶端对齐?
- 把应用 inline-block的元素加上 vertical-align: top;
CSS sprite 是什么?
CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因。
让一个元素"看不见"有几种方式？有什么区别?
opacity: 0 ; 透明度为0，整体
visibility: hidden ; 和opacity:0 类似
display:none; 消失，不占用位置
background-color: rgba(0，0，0，0.2) 只是背景色透明
