1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center可以让父元素中的内容水平居中，作用在块元素上使行内内容水平居中。
2. IE 盒模型和W3C盒模型有什么区别?
IE 盒模型和W3C盒模型的区别在于计算盒模型宽高的方式不一样。给某一盒模型设置宽高：
- 如果该盒模型是W3C盒模型：
设置的宽度=内容的宽度
设置的高度=内容的高度 - 如果该盒模型是IE盒模型：
设置的宽度=内容宽度+左右padding值+边框宽度
设置的高度=内容高度+上下padding值+边框宽度
3. { box-sizing: border-box;}的作用是什么？
{ box-sizing: border-box;}的作用是让所有元素的盒模型宽高的计算方式都按照IE盒模型宽高的计算方式去计算。
4.写一个 btn 的class， 任何 a，span,div,button
)
添加此class后后变成如下按钮的样式(鼠标hover背景色#c14d21
, 鼠标按下背景色#e25f31
5. inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- inline-block的特性有以下几点：
- inline-block元素可以设置宽高和上下左右的padding和margin。
- inline-block元素并排排列
- inline-block元素默认宽高为内容宽高
方法一:标签连写(删除空格不换行)
方法二: 父级元素font-size 设为0,再重新给inline-block元素设置font-size
方法三:设置浮动
高度不一样的inline-block元素顶端对齐
-
通过设置vertical-align:top;样式对齐
未对齐
![设置vertical-align:top;样式后]
](http://upload-images.jianshu.io/upload_images/3889793-c774050e34051562.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
6.CSS sprite
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片.
CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
7. 让一个元素"看不见"有几种方式？有什么区别？
opacity: 0：元素透明度为0，还占有位置；
visibility: hidden：与opacity: 0类似；
display: none：元素消失，不占位置；
background-color: rgba(0,0,0,0.2)：背景色透明。
