「这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战」
CSS 可替换元素和非替换元素
HTML5规范中的元素非常多，之前了解的比较多的都是从布局的角度分为行内元素和块级元素。面试的时候被问到了替换元素的概念（之前完全没听过）。这篇文章主要是做一个简单的介绍。
可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
非替换元素（non-replaced element） 的内容由CSS渲染直接表现给客户端。
匿名的可替换元素：用 CSS content 属性插入的对象是匿名的可替换元素。它们并不存在于 HTML 标记中，因此是“匿名的”。
简单来说，可替换元素的内容不受当前文档的样式的影响。
CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。
一、替换元素
典型的可替换元素有：
有些元素仅在特定情况下被作为可替换元素处理：
HTML 规范也说了
<input>元素可替换，因为"image"类型的<input>元素就像<img>一样被替换。但是其他形式的控制元素，包括其他类型的<input>元素，被明确地列为非可替换元素（non-replaced elements）。该规范用术语小挂件（Widgets）来描述它们默认的限定平台的渲染行为。
二、非替换元素
和替换元素对应，不是替换元素的元素就是非替换元素。
HTML5规范中的大多数元素都是不可替换元素，例如：
<p>,<h1>,<div> ...
三、疑问
- input元素是不是只有 type=image 的时候才是可替换元素
MDN上关于input元素的描述：
Inputs, being replaced elements, have a few features not applicable to non form elements. There are CSS selectors that can specification target form controls based on their UI features, also known as UI pseudo-classes. The input element can also be targeted by type with attribute selectors. There are some properties that are especially useful as well.
MDN上关于可替换元素有这么一段描述：
HTML 规范也说了
<input>元素可替换，因为"image"类型的<input>元素就像<img>一样被替换。但是其他形式的控制元素，包括其他类型的<input>元素，被明确地列为非可替换元素（non-replaced elements）。该规范用术语小挂件（Widgets）来描述它们默认的限定平台的渲染行为。
这里提到其他类型的 <input> 元素，被明确地列为非可替换元素（non-replaced elements）。在网上找了找资料，并没有找到是在哪里说明的。有了解的朋友可以评论区交流。
四、之前存在的一些误解
- 可替换和可修改的区别。之前认为可替换是可以修改元素内容的意思，自然而然的就认为input元素都是可替换元素，这个想法是错误的。可替换元素的本质在于元素的展现效果不是由
CSS样式来控制的，而是由元素内容来决定的。
参考文章：
替换元素和非替换元素（置换元素和非置换元素）
what is a non-replaced inline element?
