# 可替换元素和非替换元素
可替换元素`replaced element`也称作可置换元素，其展现效果不是由`CSS`来控制的，这些元素是一种外部对象，它们外观的渲染，是独立于`CSS`的。非置换元素`non-replaced element`也称作非替换元素，其内容由`CSS`渲染直接表现给客户端。

## 可替换元素
* 一个内容不受`CSS`渲染控制，`CSS`渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸例如宽度、高度、宽高比等的元素，被称之为置换元素。对于可替换元素，浏览器会根据元素的标签和属性，来决定元素的具体显示内容。  
* 可替换元素的内容不受当前文档的样式的影响，`CSS`可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。对于某些可替换元素，例如`<iframe>`元素，可能具有自己的样式表，但它们不会继承父文档的样式。  
* `CSS`能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。`CSS`在某些情况下会对可替换元素做一些特殊处理，比如计算外边距`margin`和一些`auto`的具体值。一部分可替换元素，其本身具有的尺寸和基线`baseline`会被一些`CSS`属性用到，加入计算之中，例如`vertical-align`，只有可替换元素才能具有这种自带值。
* 例如浏览器会根据`<img>`标签的`src`属性的值来读取图片信息并显示出来，图片的内容由`src`决定，`CSS`并不考虑对图片的内容进行渲染。又例如根据`<input>`标签的`type`属性来决定是显示输入框，还是单选按钮等。
* 常见的可替换元素，例如`<iframe>`、`<video>`、`<embed>`、`<img>`等，有些元素在特定情况下会被当作可替换元素处理，例如`<option>`、`<audio>`、`<canvas>`、`<object>`、`<applet>`、`<input>`等。


## 非替换元素
* 非替换元素是其内容包含在文档中的元素，其内容可以受`CSS`渲染控制。
* 非替换元素的内容不会超出`CSS`的模型范围，`CSS`在渲染时会考虑非替换元素的内容。
* `HTML`的大多数元素是不可替换元素，即其内容直接表现给浏览器，例如`<div>`、`<p>`、`<h1>~<h6>`、`<table>`等等等等。


## 每日一题

```
https://github.com/WindrunnerMax/EveryDay
```

## 参考

```
https://www.jianshu.com/p/87f53471d6c2
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element
https://stackoverflow.com/questions/12468176/what-is-a-non-replaced-inline-element
```