1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
使文本水平对齐，针对行内元素
2.IE 盒模型和W3C盒模型有什么区别?
3.*{ box-sizing: border-box;}的作用是什么？
实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）
可以简化计算，更有利于排版
4.line-height: 2和line-height: 200%有什么区别?
line-height: 2 本身行高的两倍
line-height: 200% 父级元素行高的两倍
- 在不继承的情况下效果一样。
- 在继承的情况下：
父元素设置属性：font- size:10px,子元素设置：font-size:20px;
- line-height:2
父元素：line-height = 10px * 2= 20px
子元素：line-height = 20px * 2 = 40px。- line-height:200%
父元素：line-height = 10px * 200% = 20px
子元素行高= 父元素行高=20px。
5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- 特征
既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高，内外边距)
- 缝隙问题
直接删除两个span标签中间的空格
<span>aa</span><span>bb</span>
或者用div盒子将多个span装进去,设置div的font-size: 0，再设置span的 font-size: 16px
<style>
div{
font-size: 0;
}
span{
border: 1px solid black;
width: 40px;
height: 20px;
display: inline-block;
font-size: 16px
}
</style>
<body>
<div class="no-gap">
<span class="aa">aa</span>
<span class="bb">bb</span>
</div>
</body>
- 顶端对齐
vertical-align:top;
没有设置时是默认文字底部基线对齐。
vertical-align:middle;中部对齐
vertical-align:bottom;底部对齐
#####6.CSS sprite 是什么?
CSS Sprites俗称精灵图。是把网页中一些背景图片整合到一张图片中
“background-image”，“background- repeat”，“background-position”属性用来背景定位。
- 优点
>- 减少网页的http请求，提高性能
- 减少图片大?。憾嗾磐计闯?张图片
- 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
- 缺点
>- 图片合成比较麻烦；
- 背景设置时，需要得到每一个背景单元的精确位置，；
- 宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂；
- 维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。
#####7.让一个元素"看不见"有几种方式？有什么区别?
display：none 不占用位置，浏览器不加载
rgba(0, 0, 0, 0)；背景色透明
visibility:hidden； 看不见，但占用位置，等同于opacity：0
opacity：0 ；透明度为0
>加一个对比
background-color：transparent
只是将背景设成透明的，上面的文字还是可以看见的
opacity：0
整个层都透明了，包括背景和里面的所有内容
[background实现logo变色](http://js.jirengu.com/nopenacupa/1/edit)
[icon-font实现logo变色](http://js.jirengu.com/narafiqela/1/edit?html,css,output)