[ 写在前面 ] 一直以来都没有系统的学过css，对于行内元素很多的认知都是做项目的时候遇到bug然后从网络上各种七零八落的总结上获得的，之前在网上看到w3cschool教程等上面的介绍都很简略，而没有一些更深层的标准化定义。在之前准备工作室交流会的资料的时候，对于行内元素有关的概念和计算总觉得模糊，而在这次翻找W3C规范的过程中，对其终于也有了一些自己的理解。
鉴于有些概念不知道用怎样的中文名比较恰当，所以下面的有些专业名词我直接使用英文了~行内级元素(inline-level elements)
行内级元素是那些不会为自身内容形成新的块，而让内容分布在多行中的元素。行内级元素由以下两类元素组成，一种是em、strong、span、a、img、ul、ol、li等常见行内元素，一种是由display属性为’inline’, ‘inline-table’, and ‘inline-block’转换而形成行内级元素。其中，行内元素又分为 可置换元素(replaced elements)和 非置换元素(non-replaced elements)
可置换元素
An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its “src” attribute designates.
可置换元素即是浏览器可以通过元素的标签类型和属性来决定元素具体显示的内容，比如
<input type="text">显示的是一个输入框，可是如果把text改为radio,则会显示一个单选框。(x)html中的img , input , textarea , select , object都是置换元素，audio和canvas在某些特定情形下为置换元素。使用CSS的content属性插入的对象是匿名置换元素。- 可置换元素不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，同时我们也
- 可对其设置
width和height(比如img)。 设置padding-top、margin-top、margin-bottom对其均无效padding和margin都会影响可置换元素行高，即会影响inline box高度，继而影响line box，即会撑开父元素
内容区高度值 =padding-top+padding-bottom+margin-top+margin-bottom+height。padding-left/right和margin-left/right对行内元素的有效
非置换元素
除去可置换元素之外的行内元素- 不可以设置
width和height，对于高度的计算基于框内内容的高度(字体的大小)，并仅能通过设置line-height参与高度的计算。 设置margin-top、margin-bottom、padding-top和padding-bottom对非置换元素无效padding不会影响非置换元素行高(但设置背景颜色可以看到padding)，即对inline box的高度无影响，也就不会对line box产生影响，也就不会撑开父元素padding-left/right和margin-left/right对行内元素有效
- 不可以设置
[注]：button不是行内元素，是可变元素（具体概念还没有在文档中找到），会根据上下文来决定他是一个块元素还是行内元素。除了button，还有下列可变元素
- applet - java applet
- utton - 按钮
- del - 删除文本
- iframe - inline frame
- ins - 插入的文本
- map - 图片区块(map)
- object - object对象
- script - 客户端脚本