"full-size"绝对定位方法的区别

Question

当将一个绝对定位的元素设置为其父元素的全尺寸时，是否存在以下差异：

.full-size {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

和：

.full-size {
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

我倾向于使用顶部的变体，但通常当我看到它完成时，我会看到使用底部的变体。我想知道在旧的浏览器或某些场景中，两者的行为是否有任何不同；即一个是否比另一个更有弹性。

Answer 1

如果绝对定位的元素具有填充或边界，则顶部变量（将width和height设置为100%）将无法正常工作，除非您还将box-sizing设置为border-box。

如果img和iframe等替换元素具有内在维度，则底部变体（将所有边上的偏移归零）将不适用于这些替换元素。

例如，以下图像的固有大小为100像素乘100像素：

<img class="full-size" src="http://placehold.it/100x100" alt="">

默认情况下，此图像将始终保持其固有大小，而不是缩放以适应包含的块，无论它是小于还是大于图像。在CSS中设置width和height将覆盖这些内在维度，从而允许图像缩放。