可替换元素和非替换元素
可替换元素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>等等等等。