React Flex组件开发：CSS中绝对定位替换框指什么？

要理解这个概念，拆成两部分就能搞明白：

1. 替换元素（Replaced Elements） #

替换元素是指内容不由CSS渲染、而是由外部资源或浏览器原生控件提供的HTML元素，常见类型包括：

• 媒体类：<img>、<video>、<audio>
• 表单控件类：<input>、<select>、<textarea>、<button>
• 嵌入类：<object>、<iframe>

这类元素的尺寸通常由自身内容（比如图片分辨率、输入框默认大小）决定，除非你通过CSS显式设置宽高。

2. 绝对定位替换框 #

当替换元素同时设置了position: absolute或position: fixed时，就成为了“绝对定位替换框”。

结合你提到的MDN说明，翻译成中文是：

在绝对定位布局中，normal关键字在绝对定位替换框上表现等同于start，在其他所有绝对定位框上表现等同于stretch。

换个直白的说法：

• 对于绝对定位的替换元素（比如绝对定位的<img>），align-items: normal会让元素沿着对齐容器的起始边缘放置，不会被拉伸；
• 对于绝对定位的非替换元素（比如绝对定位的<div>），align-items: normal会让元素在交叉轴方向上拉伸填满容器的可用空间。

举个简单的代码示例：

/* 父容器，作为绝对定位的参考容器 */
.flex-container {
  position: relative;
  height: 200px;
  border: 1px solid #ddd;
}

/* 绝对定位的替换元素：img */
.replaced-abs-box {
  position: absolute;
  align-self: normal; /* 继承父容器的align-items: normal */
  /* 图片保持原始尺寸，顶部对齐容器 */
}

/* 绝对定位的非替换元素：div */
.non-replaced-abs-box {
  position: absolute;
  width: 150px;
  align-self: normal;
  background: #f5f5f5;
  /* div会被拉伸至容器的200px高度 */
}

内容的提问来源于stack exchange，提问作者Byeongin Yoon