原因是行内元素默认都受vertical-align（垂直对齐方式）和line-height（行高）的影响， 而vertical-align默认的对齐方式是baseline,即基线对齐。 这个基线就是span标签里的字母X的下边沿，故图片底部是与字母底部相对齐的（不是与span标签的背景对齐）。 又因为字母本身有line-height（行高）值，所以span标签加上背景后比字母要高一些。

请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，适用于移动端

title与h1、b与strong、i与em、img的alt与title、src与href有什么区别 

title是网站标题，h1是文章主题

搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签

alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方  title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover

href，.是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。  src是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用  src通常用作“拿取”（引入），href 用作 “连结前往”（引用）

如何使用IconFont？

在IconFont网站上的图标库中搜索自己需要的图标，然后下载

HTML中dl、ul、ol用哪个比较好？

ul经常用来实现轮播的小按钮，下拉菜单的各种要用来排列的列表，多个a标签排列等，实用范围非常广。而ol因为它的有序属性，用的范围就比较小了，不是一定要用有序来排列的情况下，一般都是用ul