content 与替换元素
1. 什么是替换元素
通过修改某个属性值呈现的内容就可以被替换的元素。例如<img>、<object>、<video>、<iframe>或者表单元素<textarea>和<input>都是典型的替换元素。
具有的特性：
l 内容的外观不受页面上的 CSS 的影响
l 有自己的尺寸
l 在很多 CSS 属性上有自己的一套表现规则
2. 替换元素的默认 display 值
替换元素的默认 display 值根据元素类型主要为 inline 和 block 两种，

IE 浏览器和 Chrome 浏览器表现一致，但是 Firefox 浏览器在 <textarea>和绝大多数类型的<input>元素上却是返回的 inline
3. 替换元素的尺寸计算规则
替换元素的尺寸计算规则如下：
1. width 和 height 都未设置，则元素会根据其固有的宽高来显示（例如，图片会采用原始的宽度和高度）。
2. 只设置了一个维度，另一个维度会根据固有的比例自动调整。若 width 和 height 都有指定值，则元素直接使用指定的尺寸显示。
3. 对于某些带有内嵌内容的替换元素（如 <img>、<video> 等），CSS 中的 object-fit 属性可用于控制内容在容器内的缩放方式，如覆盖、填充、保持比例等，object-position 则用于调整内容的对齐位置。
4. 替换元素和非替换元素的距离有多远
替换元素和非替换元素的距离主要由元素的 margin、padding 和 border 等 CSS 属性决定。替换元素（如 <img>、<input> 等）会按照其自身的尺寸进行布局，而非替换元素（如 <div>、<p> 等）则根据内容的流动和布局规则进行计算。当两者在文档流中相邻时，若没有设置任何外边距，则两者之间的距离为零；如果其中一方设置了 margin，那么这个外边距将影响它与相邻元素之间的距离。在计算上下文中，替换元素的外边距不会与非替换元素的外边距发生合并，而是各自独立计算，因此在布局时需要注意这些外边距的设置。