CSS中确定绝对元素大小的两种方法

任何使用CSS已有一段时间的人都会知道绝对和相对定位的优点。 回顾一下：

position: relative允许元素从其原始位置水平（使用left或right ）或垂直位置（使用top或bottom ）移动。

position: absolute允许使用left ， right ， top或bottom相对于包含块定位元素（包含块是具有相对，绝对或固定位置的最近祖先节点）。

因此，定位节点很简单，例如

HTML：

<div id="outer">
	<div id="inner"></div>
</div>

CSS：

#outer
{
	position: relative;
	width: 200px;
	height: 200px;
	margin: 20px auto;
	border: 2px solid #c00;
}

#inner
{
	position: absolute;
	left: 50px;
	top: 50px;
	width: 96px;
	height: 96px;
	background-color: #ddc;
	border: 2px solid #00c;
}

（由于添加了边框，内部块的实际宽度和高度将为100px）。

在每个现代浏览器（包括IE6）中都会呈现以下框：

少为人知的是，你可以将所有的left ， right ， top和bottom的同时性能。 以下CSS将相同地渲染内部元素：

#inner
{
	position: absolute;
	left: 50px;
	right: 50px;
	top: 50px;
	bottom: 50px;
	background-color: #ddc;
	border: 2px solid #00c;
}

内部框的宽度和高度将保持100px，但是我们不需要显式设置尺寸。

在以下情况下，这可能会很有用：

• 元素周围的间距比宽度或高度更重要。 您还可以使用负的left ， right ， top和/或bottom属性使内部框大于其外部父级。
• 您有多个具有不同边框和填充的内部元素，但需要一致的外部间距。 此方法使您可以为所有这些元素创建一个样式。

JavaScript动画也可以从中受益，因为如果不需要计算结果的宽度和高度，例如，调整元素的大小可以更加轻松快捷地进行调整，例如

// expands and contracts the inner box
window.onload = function() {

	var inner = document.getElementById("inner");
	var offset = 100, dir = -1;
	setInterval(function() {
		inner.style.left = inner.style.right = inner.style.top = inner.style.bottom = offset+"px";
		offset += dir;
		if (offset == 0 || offset == 100) dir = -dir;
	}, 10);
	
}

关于浏览器兼容性的注意事项：该技术在所有主要浏览器中都适用， 但 IE6 除外， IE6仅了解显式的宽度和高度。 有惊喜！

From: https://www.sitepoint.com/css-sizing-absolute-position/