固定和绝对定位的元素是否不像块元素那样占据其容器的整个宽度?如果是,那为什么呢?

用户名

这篇文章中,我了解到绝对定位的元素不会充当块级元素。

因为绝对定位的元素不会像块级元素那样起作用,并且不会像正常角色一样互相流动。

从评论中的讨论来看,绝对定位的元素似乎仍然是块级元素。唯一的区别是它们不占用其父容器的整个宽度。我发现固定位置的元素也是如此。我尝试了以下代码。在此代码中,显示了两个框。一个是静态放置的,第二个是绝对放置的。可以看出,静态放置的框占据了其父容器(视口)的整个宽度。但是,绝对定位的框不会占据其父容器(视口)的整个宽度。

<!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会发生变化宁愿称其为父代更有意义。absolutefixed

由于没有容器元素可以继承其宽度,因此您会看到它的行为更像inline-block-type元素。

这就是W3C在计算绝对定位的,不可替换元素的宽度时所说的

确定这些元素的使用值的约束是:

left+ margin-left+ border-left-width+ padding-left+ width+ padding-right+ border-right-width+ margin-right+ right=包含块的宽度。

如果所有三个的leftwidthrightauto:首先设置任何auto用于值margin-leftmargin-right为0。然后,如果direction建立包含块的静态位置的元素的属性被ltr设置left到静止位置,并应用以下规则号3;

这是真实的。您尚未为定义任何值widthleftright没有继承这些值。因此,它们采用默认值autodirection属性的确ltr也是如此,因此我们继续按照建议的第三条规则进行操作,即:

  1. widthrightareautoleftnot auto,则宽度缩小以适合。然后解决right

收缩到合适宽度规则适用,并去如下:

所述的计算收缩以适应的宽度是类似于使用自动表格布局算法计算一个表格单元格的宽度。粗略地:通过格式化内容而不在出现明确的换行符的地方换行而不折断来计算首选宽度,还可以计算首选的最小宽度,例如,尝试所有可能的换行符。CSS 2.1并未定义确切的算法。第三,计算的可用宽度:这是通过求解发现width之后设置left(在情况1)或right(在情况3)为0。

然后,收缩至配合宽度为:min(max(首选最小宽度,可用宽度),首选宽度)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

td元素的子元素占据整个宽度和高度

来自分类Dev

如果父元素是静态的,为什么绝对定位的元素自身不相对于父元素定位?

来自分类Dev

绝对定位元素的宽度

来自分类Dev

纯 CSS:垂直和水平居中一个绝对定位元素,其宽度取决于子元素

来自分类Dev

li元素占据了屏幕的整个宽度

来自分类Dev

为什么绝对元素宽度受内联块父级限制

来自分类Dev

为什么绝对元素宽度受内联块父级限制

来自分类Dev

为什么绝对定位元素显示在静态元素上?

来自分类Dev

在绝对定位 div 中定位固定 div 有效 - 但为什么呢?

来自分类Dev

为什么容器不能占据整个高度

来自分类Dev

为什么绝对定位的元素会比以前的绝对定位的元素渲染?

来自分类Dev

位置绝对和固定块元素如何获得尺寸?

来自分类Dev

相对定位元素内的绝对定位元素。如何获得宽度和高度?

来自分类Dev

为什么不像示例中那样#truncate包括给定的块?

来自分类Dev

如何确定元素是否在固定位置的容器中?

来自分类Dev

为什么不选择,并且textarea值更改在克隆时不像输入元素那样更新?

来自分类Dev

为什么从div扩展的自定义元素在样式方面不像div那样起作用

来自分类Dev

为什么不选择,并且textarea值更改在克隆时不像输入元素那样更新?

来自分类Dev

如何使输入元素占据固定宽度元素旁边的可用空间?

来自分类Dev

为什么渲染树不包含绝对定位的元素?

来自分类Dev

一旦将内部响应式图像放入显示内嵌块元素,将其放置在firefox中的绝对/固定容器中后,其宽度将不正确

来自分类Dev

扫描程序是否应该仅实例化一次?如果是这样,为什么呢?

来自分类Dev

固定位置元素位于绝对位置元素内

来自分类Dev

固定位置元素位于绝对位置元素内

来自分类Dev

使按钮填充容器元素的整个宽度?

来自分类Dev

为什么这些内联块元素会产生额外的宽度?

来自分类Dev

为什么更改元素的宽度会影响其同级?

来自分类Dev

为什么html元素不占据整个浏览器视口?

来自分类Dev

是否可以通过nightwatch.js设置元素的Style属性的值?如果是,那怎么办?

Related 相关文章

  1. 1

    td元素的子元素占据整个宽度和高度

  2. 2

    如果父元素是静态的,为什么绝对定位的元素自身不相对于父元素定位?

  3. 3

    绝对定位元素的宽度

  4. 4

    纯 CSS:垂直和水平居中一个绝对定位元素,其宽度取决于子元素

  5. 5

    li元素占据了屏幕的整个宽度

  6. 6

    为什么绝对元素宽度受内联块父级限制

  7. 7

    为什么绝对元素宽度受内联块父级限制

  8. 8

    为什么绝对定位元素显示在静态元素上?

  9. 9

    在绝对定位 div 中定位固定 div 有效 - 但为什么呢?

  10. 10

    为什么容器不能占据整个高度

  11. 11

    为什么绝对定位的元素会比以前的绝对定位的元素渲染?

  12. 12

    位置绝对和固定块元素如何获得尺寸?

  13. 13

    相对定位元素内的绝对定位元素。如何获得宽度和高度?

  14. 14

    为什么不像示例中那样#truncate包括给定的块?

  15. 15

    如何确定元素是否在固定位置的容器中?

  16. 16

    为什么不选择,并且textarea值更改在克隆时不像输入元素那样更新?

  17. 17

    为什么从div扩展的自定义元素在样式方面不像div那样起作用

  18. 18

    为什么不选择,并且textarea值更改在克隆时不像输入元素那样更新?

  19. 19

    如何使输入元素占据固定宽度元素旁边的可用空间?

  20. 20

    为什么渲染树不包含绝对定位的元素?

  21. 21

    一旦将内部响应式图像放入显示内嵌块元素,将其放置在firefox中的绝对/固定容器中后,其宽度将不正确

  22. 22

    扫描程序是否应该仅实例化一次?如果是这样,为什么呢?

  23. 23

    固定位置元素位于绝对位置元素内

  24. 24

    固定位置元素位于绝对位置元素内

  25. 25

    使按钮填充容器元素的整个宽度?

  26. 26

    为什么这些内联块元素会产生额外的宽度?

  27. 27

    为什么更改元素的宽度会影响其同级?

  28. 28

    为什么html元素不占据整个浏览器视口?

  29. 29

    是否可以通过nightwatch.js设置元素的Style属性的值?如果是,那怎么办?

热门标签

归档