详解Html替换元素与非替换元素_html置换元素有哪些-CSDN博客

前部分转载自：详解HTML行内置换元素与非置换元素的区分

一般情况下，行内元素只能包含数据和其他行内元素，除非你可以对css进行更改，那就可以另说了。

而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

以上只是个大概的说法，具体都某些特定的元素这条规律不一定适用~

通常我们的认识是这样的：

一、行内元素

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等

二、块级元素

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

同时，我们也知道，行内元素设置width，height无效。那么来了img标签、input标签为啥可以设置呢？

先进一个题外话

在面试一个 重构（各大公司的叫法可能不太一样）时，我喜欢从一个点开始问，然后一直延展下去成为一条线，甚至是一个面，直到问到不会的地方，然后又换另外一个点。

例如：我可能会说，能简单聊聊 行内级元素 和 块级元素 的区别吗。

一般这时，候选人都会说到 行内级元素 不会换新行，而 块级元素 会格式化为块状，即换行。但也有些遗憾的方面（如：http://blog.csdn.net/syleapn/article/details/79582190），当然这看起来似乎不是特别重要。

这时我会继续问，行内元素 能够定义宽度和高度吗？

不少候选人会说：不能

我会继续问，说几个你熟悉的 行内元素 吧

于是 span, strong, em, ins… 答案我还是比较满意的。

我仍然会继续，img 是行内元素么？

候选人这时通常会迟疑一下，可能意识到我接下来想问啥了，但还是会回答：是

于是我会说，那 img 能定义宽度和高度么？

有的候选人这时会犹豫，因为如果回答是，就会推翻他之前说的 行内元素不能定义宽高，如果回答不是，似乎又和他所熟知的经验不一致。但通常最后还是会回答：能

那我就又得问，你之前不是说 行内元素不能定义宽高 吗？为什么 img 可以？

到这里，候选人基本上不知道要怎么回答好了，最后可能会告诉我，因为 img 是特殊元素

当然，虽然这么回答也不能说是错误的，但基本上也能知道候选人对这条线的基础的掌握程度了。

但我希望听到的答案是通过解释置换元素相关的概念从而给出答案。

ok，到了这儿，大家也略知一二是什么意思了吧，下面进入正题：

html元素分为置换元素（又叫替换元素）与非置换元素（又叫非替换元素），置换与非置换元素有稍许的区别。注：置换元素与非置换元素不仅是行内元素中有，块状元素也有置换元素与非置换元素之分->比如：嵌入的文档（iframe之类），还有audio和canvas在某些特定情形下也为置换元素。。。。。。使用CSS的content属性插入的对象是匿名替换元素。

那么什么是置换元素与非置换元素？

转化官方的话来说意思为：一个 内容 不受CSS视觉格式化模型控制（关于视觉格式化模型控制的问题，请戳这里->视觉格式化模型中的各种框），CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。即置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

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

非置换元素，W3C 中没有给出明确的定义，

说明：(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。比如<p>p的内容</p>、<label>label的内容</label>；浏览器将把这段内容直接显示出来。

是不是还是有点绕，还是不太明白，我们看下面的阐述，通俗易懂：

来自徐涛的博客->Html中置换元素与非置换元素，地址链接http://blog.sina.com.cn/s/blog_4c81e6230101e29u.html

或许有朋友对非置换元素（non-replaced element）有点疑惑，稍微帮助大家理解一下。非置换元素，W3C 中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素（replaced element），也就是说我们搞懂了置换元素的含义，就懂了非置换元素。置换元素，W3C中给出了定义：

“An elementthat is outside the scope of the CSS formatter, such as an image,embedded document, or applet”

从定义中我们可以理解到，置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知，非置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。

补充：关于margin与padding->对于置换元素与非置换元素有不同影响？

关于这个问题，博主也正在研究中，这儿有篇文章很详细->http://blog.csdn.net/gr11222/article/details/52071168，大家可以也先参考下:欢迎一起来讨论这个问题~

但最后需明确的一点是：第一：html（行内元素+块状元素）分置换元素与非置换元素。

第二：padding、margin对置换元素与非置换元素的影响不同。

第三：对于块状非置换元素与行内非置换元素，padding与margin的影响不一样。块状置换元素与行内置换元素的性质一样。

So，最后问题上升到只需解决与清楚->行内置换元素与行内非置换元素的padding和margin使用！

附：w3c对padding与margin的说明