“全尺寸”绝对定位方法的区别

Question

当一个绝对定位元素的父元素的完整大小时，ss之间有任何区别：

.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设置为{{1 }}

如果border-box和img具有内在尺寸，则替换元素（如iframe和<img class="full-size" src="http://placehold.it/100x100" alt=""> ）不会使用底部变量（将所有边上的偏移归零）。

例如，以下图像的固有尺寸为100像素乘100像素：

width

默认情况下，无论图像是小于还是大于图像，此图像将始终保留其固有大小，而不是缩放以适合包含块。在CSS中设置height和{{1}}会覆盖这些内在尺寸，从而可以缩放图像。