位置绝对和固定块元素如何获得尺寸? [英] How position absolute and fixed block elements get their dimension?

问题描述

实际上，我看到了很多这样的问题，但是我找不到这个问题的正常答案，因为我再次打开了这个问题.

actually I saw many questions like this but I can't found normal answer of this question because that I open this question again.

当具有块元素(显示:块)时，如果元素本身是根元素，则此元素包含父组件的完整宽度.

When we have block element(display: block) this element contain full width of parent component if element itself root element this element width take 100%.

但是当我们查看块元素(display:block)但定位绝对元素时，甚至有内联块元素(像块元素一样工作，但宽度未充满父组件)甚至父元素相对位置都起作用.

But when we look block element(display:block) but position absolute elements there are work like inline-block elements(work like block element but width not full of parent component) even parent element position relative.

谁能解释我为什么位置绝对和固定元素宽度不能像显示那样工作:块元素.

Can anyone explain me why position absolute and fixed elements width not work like display: block elements.

https://jsfiddle.net/epbkmzh3/28/

    <div class="container">
      <div style="background: red;"> 1 </div>
    </div>
    
    
    <div class="container" style="position: relative;">
      <div style="position: absolute; background: red;"> 1 </div>
    </div>

推荐答案

以下是详细说明如何查找任何元素的宽度/高度的规范:

Here is the Specification detailing how you can find the width/height of any element: https://www.w3.org/TR/CSS21/visudet.html

从那里您可以阅读以下绝对元素:

From there you can read for absolute element that:

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

The constraint that determines the used values for these elements is:

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

然后

如果'left'，'width'和'right'的全部三个均为'auto':首先将'margin-left'和'margin-right'的所有'auto'值设置为0.然后，如果建立静态位置包含块的元素的"direction"属性为"ltr"，将"left"设置为静态位置，并在下面应用规则三；否则，将"right"设置为静态位置，然后应用以下第一条规则.

If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.

第三个规则:

'width'和'right'为'auto'而'left'不是'auto'，则宽度为fit-fit .然后解决正确"

第一条规则也很相似

如果您继续阅读，将会发现如何计算缩小至适合宽度.您还将注意到，相同的缩小以适应算法适用于 float 和 inline-block 元素

And if you continue reading you will find how to calculate the shrink-to-fit width. You will also notice that the same shrink-to-fit algorithm apply to float and inline-block element

还请注意，固定元素是绝对值的特殊情况，因此适用相同的规则.唯一的区别是包含块

Also note that fixed element is a particular case of absolute so the same rule applies. The only difference is the containing block

固定定位是绝对定位的子类别.唯一的区别是，对于固定位置的框，包含块是由视口建立的. 参考

---

您还可以看到，块元素遵循几乎相同的约束(无左/右)，但

其他属性的使用值中必须包含以下约束:

The following constraints must hold among the used values of the other properties:

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

然后

如果将宽度"设置为自动"，则其他所有自动"值将变为"0"，并且从产生的相等性中得出宽度".

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

这将使 width =包含块的宽度

内联块元素之间的一个重要区别是，绝对元素不会像我们想象的那样占用其内容的宽度.由于上述约束，在大多数情况下会发生这种情况，但请检查以下示例:

An important difference between inline-block element is that absolute element will not take the width of their content like we may think. This happen in most of the case due to the constraint explained above but check the below example:

.container {
 clear:left;
 margin:5px;
}

<div class="container" style="float:left;position:relative;">
  <div style="display:inline-block; background: red;"> 1 1 1 1 1 1  </div>
</div>

<div class="container" style="float:left;position:relative;">
  <div style="position: absolute; background: red;"> 1 1 1 1 1 1  </div>
</div>

请注意，绝对元素将如何包装到可能的最小尺寸，以使内联块脱线.这是由于包含块也是缩小以适合容器的事实.

Note how the absolute element will wrap to the smallest size possible unline the inline-block. This is due to the fact that the containing block is also a shrink-to-fit container.

相关:为什么将所有内容自动换行嵌套在float或inline-block元素内

这篇关于位置绝对和固定块元素如何获得尺寸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！