在本小节我们主要讨论 CSS 中的替换元素与非替换元素。CSS 中的元素最常见的元素都是是非替换元素，如 <div> 和 <span>。还有一些元素是非替换元素如 <img> 和 <textarea> 等。

content与替换元素

替换元素(replaced element): 元素内容是否可替换。

根据外在盒子是内联还是块级我们可以把元素分为内联元素还是块级元素，而根据元素内容是否可替换，把元素分为替换元素和非替换元素。

如:

<img>、<object>、<video>、<iframe>、<textarea>、<input>、<select>

替换元素的性质

• 内容的外观不受页面上的CSS的影响

  input[type='checkbox']

• 有自己的尺寸

大部分替换元素的默认尺寸是300x150px，少部分替换元素的默认尺寸为0x0px，表单替换元素的尺寸则和浏览器有关。 - 在很多CSS属性上有自己的一套表现规则

vertical-align: bottom; /* 基线是元素的下边缘 */

替换元素的尺寸计算规则

内联替换元素和块级替换元素使用一下同一套尺寸计算规则。

- 固有尺寸

替换内容原本的尺寸(图片、视频原本的尺寸、表单元素的固有尺寸由浏览器定义)

• HTML尺寸

通过HTML原生属性设置的尺寸

<img width="300" height="100">
<input type="file" size="30">
<textarea cols="20" rows="5">

• CSS尺寸 即元素的content box

  img {
    width: 100px;
    height: 200px;
    max-width: 300px;
    min-height: 100px;
  }

优先级: CSS尺寸>HTML尺寸>固有尺寸

替换元素的object-fit

img {
  object-fit: fill; /* 默认 */
  object-fit: contain;
  object-fit: none;
}

替换元素与流动性

textarea {
  width: 100%;
  box-sizing: border-box;
}