text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？

• text-align:center可以使行内元素与文本水平居中；作用在块级元素和行内上，使行内元素与文本水平居中，也可直接作用在行内元素上。

IE 盒模型和W3C盒模型有什么区别?

从上图可以看出，标准盒子模型的height和width只包含了content部分，而IE盒子模型的height和width不仅包含了content，还包含了padding和border。

*{ box-sizing: border-box;}的作用是什么？

• 将页面的所有盒模型设置为IE盒模型。

line-height: 2和line-height: 200%有什么区别?

• line-height: 2指的是行高为当前字体大小的两倍，line-height: 200%指的是行高为父元素字体的200%，区别在于前者行高是虽当前字体大小变化而变化的，后者是只随父元素字体大小变化而变化，子元素字体大小怎么变化行高都不会变化。

inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

• 具有inline的特性：不占据整行，宽度由内容宽度决定，同时又具有block的特性：能设置宽高。

• inline-block会将两行代码中的空白字符作为一个字符线上到页面上，去除方式：

• 将代码之间的空行删除

• 将父容器字体大小设为0，font-size: 0;

• 将margin值设为负值，margin-left: -3px;

• inline-block元素默认是baseline对齐的，若要顶端对齐只需要改为vertical-align: top;即可

CSS sprite 是什么?

• CSS Sprite，是一种通过CSS技术将原本需要多张图像文件分别显示，整并为单一图像文件的分区显示技术，借由减少下载图像文件数量，提高网页的显示性能

让一个元素"看不见"有几种方式？有什么区别?

• display：none 此方法不会占据空间
• visibility：hidden 此方法会占据空间
• opacity：0 filter:alpha(opacity=0); 透明度调为0 此方法会占据空间
• color：rgba（0，0，0，0）同上

代码练习

练习1
练习2