1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
作用：是让块级元素的内的行内元素或者文字居中，作用在块级元素上，能让块级元素内的行内元素和文字水平居中；
2.IE 盒模型和W3C盒模型有什么区别?
- IE盒模型：width（宽度）=content尺寸+padding+border
- W3C盒模型：width（宽度）=content(内容宽度）
- ie6 7 8 怪异模式（不添加doctype）使用ie盒模型，宽度=边框+padding+内容宽度
- chrome ie9+ ie6 7 8(添加doctype)使用W3C盒模型，width(宽度）=内容宽度
3.{ box-sizing: border-box;}的作用是什么？
- 使用css3新样式box-sizing:
1.box-sizing：content-box W3C盒模型
2.box-sizing:border-box IE盒模型 - 盒子模型基准尺寸有两种，一种是content-box，这是对于W3C盒模型尺寸的，一种是border-box，这是对于IE盒模型尺寸的计算；
-
content-box和border-box二者的区别其实就是是否有包含表边框（border）和内边距（padding）
9a7e8b3b280c5d570d60cc6bca5a450.png
9f6bdd9e61f7ec2ba0a6cd629d5e799.png
从检查元素就能看出二者的区别了：首先当设置box-sizing:border-box时，我设置的盒模型宽度为200px，但是在检查元素中却只能看到宽度为178px了，因为里面包含了padding和border；然后当设置box-sizing:content-box时，我设置的盒模型宽度为200px，检查元素中，也能看到宽度为200px。
4.line-height: 2和line-height: 200%有什么区别?
- lini-height: 2 ;继承的是页面上每个元素它本身高度的2倍
-
line-height: 200%;继承的是父元素文字高度的2倍
3b4c92489b832988616f27816771e1e.png
5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- inline-block：既具有inline的属性（不占据一整行，宽度有内容宽段决定），又具有block的属性（可设置宽高，内外边距）
- 如何去除缝隙：1.在CSS中用div包裹住元素，然后在父元素中设置font-size为零，再把子元素中font-size的值设置出来；
2.在html中，设置元素不要转行或者留着任何空格即可； - 如何对齐：vertical:top(顶端对齐）、bottom(底部对齐）。
6.CSS sprite 是什么?
- CSS精灵图 使用精灵图只需要引用一张图片，通过位移就可以获得所需的图片；
- 优点：请求比较少，网速较快，占更小的内存，用更少的流量；
- 缺点：无法缩放，不好修改；
7.让一个元素"看不见"有几种方式？有什么区别?-
- opacity:o; 整体透明度为0；
- visibility:hidden; 与opacity:0;类似；元素看不见，透明，但是本身还是存在，浏览器知道存在，有位置的。
- background-color:ragb(0,0 ,0 ,0.2)设置背景为透明颜色；
- display:none;是指让元素消失，对浏览器而言，元素是不存在的。
