详解Html替换元素与非替换元素

快来打我* 2022-05-29 04:13 156阅读 0赞

**前部分**转载自：[*详解HTML行内置换元素与非置换元素的区分*][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等

## 二、块级元素    ##

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

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

#### **先进一个题外话** ####

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

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

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

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

不少候选人会说：**不能**

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

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

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

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

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

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

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

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

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

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

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

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

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

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

**举例说明：例如浏览器会根据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***][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*][http_blog.csdn.net_gr11222_article_details_52071168]**，大家可以也先参考下:欢迎一起来讨论这个问题~**

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

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

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

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

**附**：w3c对padding与margin的说明

![Image 1][]

**![Image 1][]**

[HTML]: http://caibaojian.com/inline-vs-block.html
[HTML5]: http://caibaojian.com/t/html5
[http_blog.csdn.net_syleapn_article_details_79582190]: http://blog.csdn.net/syleapn/article/details/79582190
[CSS]: http://caibaojian.com/css3/
[CSS 1]: http://caibaojian.com/t/css
[http_blog.sina.com.cn_s_blog_4c81e6230101e29u.html]: http://blog.sina.com.cn/s/blog_4c81e6230101e29u.html
[http_blog.csdn.net_gr11222_article_details_52071168]: http://blog.csdn.net/gr11222/article/details/52071168
[Image 1]: