-
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
text-align:center能让文本内容居中，作用在块元素上，能让块元素中的行内元素居中，是可继承的属性。
-
IE盒模型和W3C盒模型有什么区别?
IE盒模型与w3c盒模型的区别在于width和height的定义不一样：
IE盒模型的width包括了content、padding、border的宽度，height包括content、padding、border的高度；
w3c盒模型的width和height仅仅指content的宽度和高度。
-
*{ box-sizing: border-box;}的作用是什么？
在默认情况下，一个块元素的盒模型为标准盒模型，可以通过*{ box-sizing: border-box;}属性把盒模型变为ie盒模型。
-
line-height: 2和line-height: 200%有什么区别?
line-height: 2 表示元素的行高是其自己字体大小的2倍；
line-height: 200% 表示元素的行高是其父元素字体大小的2倍。
-
inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
inline-block可以使一个元素既有inline（不占据一整行，宽度由内容宽度决定）的特性，也有block（占据一整行，可设置宽高和内外边距）的特性；
当两个元素被赋予inline-block时，两个元素之间可能会出现缝隙:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style rel="stylesheet" type="text/css">
.test {
text-align:center;
}
.aa,.bb {
display: inline-block;
border: 1px solid;
width: 100px;
}
</style>
</head>
<body>
<div class="test">
<span class="aa">aa</span>
<span class="bb">bb</span>
</div>
</body>
</html>
实现如下：
这是由于两个元素之间存在空白符造成，故可以用以下办法解决：
1.元素连写，不换行；
2.在css中设置父元素字体高度为0px，再在后面设置具体元素字高：
body {
text-align: center;
}
.test {
font-size: 0;
}
.aa,.bb {
display: inline-block;
border: 1px solid;
width: 100px;
font-size: 14px;
}
-
CSS sprite 是什么?
css sprite称为精灵图或雪碧图，是处理网页icon（小图标）的一种方式。把所有的icon整合到一张图片上，通过css进行背景定位，展现小图标的一种方法。这种方法减少网页请求，减少了服务器的压力，提高的页面的展现速度，但是缺点是无法调整图片大小，修改困难。
-
让一个元素"看不见"有几种方式？有什么区别?
1.display:none 使一个元素消失，浏览器不会绘制该元素，不占用位置；
2.opacity: 0 使一个元素透明，用户看不见，但是实际还在，占用位置；
3.visibility: hidden 与opacity: 0 作用类似；
4.background-color: rgba(0，0，0，0.2) 使背景色透明。
