以前在自学的过程中，只了解到行内元素以及块级元素。
- 行内元素：
１．设置宽高无效
２．设置margin，左右有效，上下无效；设置padding，上下左右都有效，即会撑大空间
３．不能自动换行
如：<span>
image.png
image.png
- 块级元素：
１．能够设置宽高
２．margin，paddin上下左右都有效
３．可以自动换行
４．多个块级元素，从上到下排列
但是问题来了～
<img>是行内元素，为什么它可以设置宽高？
image.png
我们很明显发现第二幅图的宽高被设置了，到底是怎么回事～
image.png
这里，<img>实际上就是所谓的替换元素
替换元素在MDN上的解释：CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有 <img>、 <object>、 <video> 和 表单元素，如<textarea>、 <input> 。 某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素（anonymous replaced elements）。
CSS在某些情况下会对可替换元素做特殊处理，比如计算外边距和一些auto值。
需要注意的是，一部分（并非全部）可替换元素，本身具有尺寸和基线（baseline），会被像vertical-align之类的一些 CSS 属性用到。
由于我的CSS水平感人，不太能理解所有的意思，参考了一些博客，就在我所学习到的知识范围内做了一个理解：可替换元素所显示的内容，需要浏览器根据元素的属性去判断。
比如<img>元素，本身并没有什么内容，内容是有属性src决定的；又如<video>是同样的道理；又如<input>，其内容是由type属性确定。
所以，我们刚才的<img>，由于虽然是行内元素，但是也是替换元素，宽高由属性src的内容决定。而<span>作为行内元素，为非替换元素，它是什么，就显示什么，有行内非替换元素的特征。
写完了还有点乱～遇到了，接着写～
