replaced element and non-replaced element（可替换元素和非可替换元素）

Q&A
question: img元素属于行内还是块级元素？
answer: 行内元素
question: 那为什么img标签能够设置高宽呢？

首先，分析一下行内元素的某些特点：

• 不可设置高宽；
• 不占满一行，可平铺；
• 对行内元素设置margin时，垂直方向上将会失效；

回到开头的问题：为什么img标签能够设置高宽呢？

img确实是行内元素，但它同时也是“可替换元素(replaced element)”，也就是“内联可替换元素(replaced inline element)”，它和块级元素一样可以设置宽高以及正常设置margin。

那么，回到正题，什么是“可替换元素(replaced element)”？

mdn是这样说的：

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如
<iframe> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

通俗地讲，可替换元素的内容是通过标签类型以及其属性值来决定的，比如img标签就是一个典型的例子，它通过src来决定其展示的内容，除此之外，常见的可替换元素还有<iframe>、<video>、<embed>等。基本上，所有的可替换元素都是行内元素。

既然有可替换元素，自然也就有“非可替换元素(non-replaced element)”，与“可替换元素”相反，即“展现效果是受css样式来控制的”，通俗将其内容由其标签包裹内容决定，我们平常使用的标签，如div、p、span、ul、li等都是非可替换元素。

补充一些img标签的特点：

• img标签对应元素默认宽高为图片真实宽高；
• 通过css对仅对img的宽或高进行设置，图片将等比进行缩放；

last（最后）
非常感谢您能阅读完这篇文章，您的阅读是我不断前进的动力。

对于上面所述，有什么新的观点或发现有什么错误，希望您能指出。

最后，附上个人常逛的社交平台：
知乎：https://www.zhihu.com/people/bi-an-yao-91/activities
csdn：https://blog.youkuaiyun.com/YaoDeBiAn
github: https://github.com/yaodebian

个人目前能力有限，并没有自主构建一个社区的能力，如有任何问题或想法与我沟通，请通过上述某个平台联系我，谢谢！！！