从这篇文章中,我了解到绝对定位的元素不会充当块级元素。
“因为绝对定位的元素不会像块级元素那样起作用,并且不会像正常角色一样互相流动。 ”
从评论中的讨论来看,绝对定位的元素似乎仍然是块级元素。唯一的区别是它们不占用其父容器的整个宽度。我发现固定位置的元素也是如此。我尝试了以下代码。在此代码中,显示了两个框。一个是静态放置的,第二个是绝对放置的。可以看出,静态放置的框占据了其父容器(视口)的整个宽度。但是,绝对定位的框不会占据其父容器(视口)的整个宽度。
<!DOCTYPE html>
<html>
<style>
.abslnowidth {
position: absolute;
display: block;
border: 1px dotted black;
padding: 10px;
background-color: gray;
}
.staticyeswidth {
position: static;
background-color: bisque;
padding: 15px;
border: 1px dotted black;
}
.abslnowidth:hover, .staticyeswidth:hover {
color:red; background-color: yellow;
}
body {
text-align:center;
border: 2px solid darkgreen;
}
</style>
<body style="">
<p>Two boxes are shown below, viz, the gray and bisque colored boxes. The gray colored box is absolutely poistioned and the bisque colored box is statically positioned <br></p>
<div class="abslnowidth">
Absolutely positioned
</div>
<div class="staticyeswidth">
Statically positioned
</div>
</body>
</html>
请注意,固定位置的框的行为类似于绝对位置的框,因为它也不会占用其父容器的全部宽度。
令我惊讶的是,我注意到固定/绝对位置元素的行为并不像块级元素那样,即使我明确设置了它也是如此display: block
;这种行为类似于inline或inline-block元素,因为inline或inline-block元素不会占用其父容器的全部宽度。
精确问题:
- 绝对/固定定位元素仍然是块级元素吗?
- 固定和绝对定位的元素是否不像块元素那样占据容器的整个宽度?如果是,那为什么呢?如果以某种特定目的定义这种方式,那么该目的是什么。请注意,我不是在征求单方面意见。我的意思是,如果不是这样的话,如果有人真的知道为什么存在此功能以及实际的缺点是什么。换句话说
- 如果将绝对/固定位置的包装盒制成其容器的整个宽度,则网页设计会有技术方面的弊端。我的猜测是绝对/固定位置的块应该被调整。例如,请参阅此代码来制作工具提示。黑色的工具提示部分不应占据“悬停在我上方”框的整个宽度,因为那样我们就必须手动设置工具提示框的宽度。因此,我认为这是定义绝对/固定位置的框而不占用其容器宽度的一个很好的理由。
请提供一些良好的参考,例如,如果可能的话,提供w3官方文档。
根据block
您期望或指的是哪种行为,这个问题可能会有不同的答案。
根据您上面的评论,以下答案指的width
是此类元素的行为。
通常,block
默认情况下,-level元素占用其容器元素的全部可用宽度。但是,当您设置position: fixed
或时absolute
,元素的显示方式与其余元素的显示方式不同。
根据MDN:
块级元素占据其父元素(容器)的整个空间,从而创建一个“块”。
这样,在引用或定位元素时,用于-level元素的容器的含义block
会发生变化。宁愿称其为父代更有意义。absolute
fixed
由于没有容器元素可以继承其宽度,因此您会看到它的行为更像inline-block
-type元素。
这就是W3C在计算绝对定位的,不可替换元素的宽度时所说的:
确定这些元素的使用值的约束是:
left
+margin-left
+border-left-width
+padding-left
+width
+padding-right
+border-right-width
+margin-right
+right
=包含块的宽度。如果所有三个的
left
,width
和right
是auto
:首先设置任何auto
用于值margin-left
和margin-right
为0。然后,如果direction
建立包含块的静态位置的元素的属性被ltr
设置left
到静止位置,并应用以下规则号3;
这是真实的。您尚未为定义任何值width
,left
也right
没有继承这些值。因此,它们采用默认值auto
。该direction
属性的确ltr
也是如此,因此我们继续按照建议的第三条规则进行操作,即:
width
和right
areauto
和left
notauto
,则宽度缩小以适合。然后解决right
。
该收缩到合适宽度规则适用,并去如下:
所述的计算收缩以适应的宽度是类似于使用自动表格布局算法计算一个表格单元格的宽度。粗略地:通过格式化内容而不在出现明确的换行符的地方换行而不折断来计算首选宽度,还可以计算首选的最小宽度,例如,尝试所有可能的换行符。CSS 2.1并未定义确切的算法。第三,计算的可用宽度:这是通过求解发现
width
之后设置left
(在情况1)或right
(在情况3)为0。然后,收缩至配合宽度为:min(max(首选最小宽度,可用宽度),首选宽度)。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句