置換元素與非置換元素

《HTML》img为什么可设宽高、margin、padding等？

文章摘自置换元素与非置换元素、CSS视觉格式化模型控制、

首先明确，img属于行内元素，但html也分置换元素与非置换元素，所以img可以设置宽高margin、padding受其是置换元素影响。
接下来解释置换元素、非置换元素与行内元素、块级元素的具体概念。

置换元素与非置换元素

先贴一波w3c官方定义, “An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”

转化官方的话来说意思为：一个 内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。即置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。通俗点理解就是 HTML中有类特殊的元素 ，如img | input | select | textarea | button | label 等，他们区别一般inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致，他们被称为可置换元素（Replaced element）

而非置换元素，官方并没有给出明确定义，但我们从字面可以理解到，非置换元素对应着置换元素（replaced element），也就是说我们搞懂了置换元素的含义，就懂了非置换元素。也就是除了 img | input | select | textarea | button | label 等其他的html标签元素

举例说明

浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；
再例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。->这些元素往往没有实际的内容，即是一个空元素。

行内元素、块级元素与行内块状元素

只要明白 块状元素、行内块元素可设宽高margin、padding等且生效，行内元素也可设宽高但不生效，贴一波哪些标签是行内元素、块级元素
一、行内元素

• b, big, i, small, tt
• abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
• a, bdo, br, img, map, object, q, script, span, sub, sup
• button, input, label, select, textarea等

二、块级元素

 1. <dd>定义列表中定义条目描述。
 2. <dl>定义列表。
 3. <div>文档分区。
 4. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>标题级别 1-6.
 5. <form>表单。
 6.  <hr>水平分割线。
 7. <ol>有序列表。
 8. <ul>无序列表。
 9.  <p>行。
 10. <table>表格。
 11. . <video> HTML5视频。
 12. <address> 联系方式信息。
 13. <article> HTML5文章内容。
 14. <aside> HTML5伴随内容。
 15. <audio> HTML5音频播放。
 16. <noscript>不支持脚本或禁用脚本时显示的内容。
 17. <blockquote>块引用。
 18. <Canvas> HTML5绘制图形。
 19. <fieldset>表单元素分组。
 20. <figcaption> HTML5图文信息组标题
 21. <figure> HTML5图文信息组 (参照 <figcaption>)。
 22. <footer> HTML5区段尾或页尾。
 23.  <output> HTML5表单输出。
 24. <header> HTML5区段头或页头。
 25. <hgroup> HTML5标题组。
 26. <iframe>内联框架等
 27. <pre>预格式化文本。
 28. <section> HTML5一个页面区段。
 29. <tfoot>表脚注。

**注：置换元素与非置换元素不仅是行内元素中有，块状元素也有置换元素与非置换元素之分->比如：嵌入的文档（iframe之类），还有audio和canvas在某些特定情形下也为置换元素。。。。。。**