替换元素与非替换元素

       最近看了一道面试题，问替换元素和非替换元素的差异是什么，当我看到题目的时候就感觉自己还是差的太远了，甚至都没听说过这个名词，接下来我就记录一下个人浅显理解的关于替换元素（replaced element）和非替换元素（non-replaced element）的一些概念。

---

html分为行内元素和块级元素：

行内元素就是不会为自身内容形成新的块，不会让内容分布在多行的元素。

块级元素就是会在视觉上被格式化成块状的元素，会新换行的元素。

---

我们知道块级元素可以设置宽（height）高（weight），行内元素却不能设置宽和高，但这其中有一些行内元素，如img,是可以设置宽高的，这就跟之前说的相违背了，由此引出了替换元素和非替换元素。

替换元素：就是浏览器根据其标签的元素属性来判断显示具体的内容的元素，且元素一般拥有固定的尺寸（宽高或宽高比）。

举例说明：img标签我们在审查元素的时候是看不到实体图片的，看到的只是它的src，浏览器根据src来显示内容；再如input标签，浏览器根据input的type值来选择显示输入框还是选择框或者其他类型。

在html中像这样的元素有img, input, textarea, select, object，这些都是替换元素，这些元素都没有实际的内容。

非替换元素：html中大多数都是非替换元素，他们直接将内容告诉浏览器，直接显示出来。

例如：p标签，浏览器会直接显示p标签里的内容。

注：替换元素和非替换元素不仅是在行内元素中有，块级元素也有替换和非替换之分，比如嵌入的文档iframe,audio,canvas在某些情况下也为替换元素。