CSS中绝对元素尺寸的两种方式

任何使用CSS一段时间的人都会了解绝对和相对定位的优点。回顾： 位置：亲戚允许元素从其原始位置（使用左或右）或垂直（使用顶部或底部）转移。 位置：绝对允许使用左，右，顶部或底部的元素相对于包含块的元素定位 （包含块是最接近的祖先节点，其位置是相对，绝对或固定的位置）。 因此，定位节点很简单，例如 html：

<div >
	<div ></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）都呈现以下框：   鲜为人知的是，您可以应用所有左，右，顶部和底部 同时属性。以下CSS将呈现内部元素相同： 内部框的宽度和高度将保持100px，但我们无需明确设置尺寸。 这可能有用时：

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

元素周围的间距比宽度或高度更为关键。您也可以使用左，右，顶部和/或底部属性来使内部框大于其外部父。

>您有多个内部元素，具有不同的边界和填充，但需要一致的外间距。此方法允许您为所有这些元素创建单个样式。
JavaScript动画也可以受益，因为如果您不需要计算结果宽度和高度，例如
• 有关浏览器兼容性的注释：此技术在所有主要浏览器中都起作用，
IE6除外，IE6仅了解明确的宽度和高度。有一个惊喜！

经常询问有关CSS尺寸和绝对定位的问题（常见问题解答）

// 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);
	
}

>在CSS，CSS，绝对和相对的CSS中绝对定位和相对定位之间有什么区别是定位方法的两种类型。绝对定位允许将元素相对于最近的位置祖先定位。这意味着该元素是从文档的正常流中取出的，并且在页面布局中没有为元素创建空间。另一方面，相对定位允许将元素相对于其正常位置进行定位。这意味着该定位与该元素在文档流中的原始位置相对，并且在页面布局中仍然保留空间。。

>“位置：绝对”属性如何在CSS？

中起作用，CSS中的“位置：绝对”属性从正常文档流中删除元素，并将其定位在指定位置相对于其最接近的位置祖先或对初始包含的块。可以使用“顶部”，“右”，“底部”和“左”属性四处移动定位的元素。但是，如果没有“静态”以外的祖先元素具有其他位置，则使用最初的包含块。这些属性仅对定位元素有影响。他们指定元素和其包含元素的一个或多个侧面之间的距离。例如，“顶部：20px”是指元素的顶部边缘距其包含元素的顶部边缘20px。首先，将“左：50％”设置为将元素的左边缘移至父母的中心。然后，使用“变换：translatex（-50％）”将元素拉回其自身宽度的左侧一半，有效地将其归为中心。

在CSS中“绝对”和“固定”定位之间的差异是什么区别？ “绝对”将元素定位为其最近的位置祖先或初始包含块。另一方面，“固定”将元素相对于浏览器窗口定位。这意味着即使页面滚动了页面，固定元素也不会移动。

>

> css如何处理重叠元素？

使用“ z index”属性重叠元素。此属性指定元素的堆栈顺序，该元素是其在z轴上的位置。具有较高“ Z index”的元素将显示在元素的前面，较低的“ z index”。

> CSS中的初始包含块是什么？

css中的初始包含块是包含块的块中的块（html）居住在哪个块中。它通常是浏览器窗口的视口，但是如果根元素的“溢出”属性不是“可见的”，也可以是页面框。

>

>我如何使元素填充父母元素的整个宽度和高度？

>

，以使其整个元素填充其父母的宽度和高度，您可以使用“宽度”和“高度”和“”属性。这将使元素与包含元素一样宽和高。>

>在CSS中，“宽度”和“最大宽度”之间有什么区别？

>

CSS中的“宽度”属性指定了元素的内容宽度，而“最大宽度”属性设置了最大宽度，元素可以在内容大于指定宽度时伸展到最大。如果内容小于“最大宽度”，则内容将保持其自然尺寸。

>

>我如何使元素保持其长宽比，因为它重新调整了？

使元素保持其长宽比，以保持其大小时，您可以在CSS中使用“ aptive-Ratio”属性。该属性定义了框的纵横比，这是宽度与高度的比率。例如，“方面比率：16 /9”将保持16：9的宽高比。>

以上是CSS中绝对元素尺寸的两种方式的详细内容。更多信息请关注PHP中文网其他相关文章！