众所周知，css中可以将元素分成块级元素和行内元素。
对于块级元素可以通过margin、padding、border来设置盒子的样式。还可以通过box-sizing来设置盒子的类型。
但对于行内元素大部分人就知之甚少，这篇文章简单的谈一下我对行内元素的理解。
哪些元素是内联元素
就行为表现来看，“内联元素”的典型特征就是可以和文字在一行显示。因此，文字是内
联元素，图片是内联元素，按钮是内联元素，输入框、下拉框等原生表单控件也是内联元素。但是，这个说法有一个前提，元素没有脱离标准流。否则，像浮动和定位元素也可以和文字在一行显示，但他们不是行内元素。
内联盒模型
在页面中，块级元素负责布局，行内元素负责内容。一个块级元素中很可能不止有一个行内元素。
下面是一段普通的HTML
<p>我是普通的文字，这里有个 一<span>span</span> 标签。</p>
1. 内容区域
内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，我们可以把文本选中的背景色区域作为内容区域(::selection)；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。
2. 内联盒子
每一个内联元素都是一个内联盒子，内联盒子使元素排成一行，用来决定元素是内联还是块级。
该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类：
如果外部含内联标签（<span>、<a>、<em>等），则属于“内联盒子”；如果是个光秃秃的文字，则属于“匿名内联盒子”。
3. 行框盒子
实际中，一个块级元素可能有很多行的内容，类似小说网站。每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。石家巷line-height就是作用在行框盒子上。
4. 包含块
此盒子由一行一行的行框盒子组成，在这个例子中<p>标签就是一个包含块。
