1

例子：

<style>
     div {
         position:absolute; left:auto; right:auto; width:auto;
         margin:0; padding:0; border:0;
     }
</style>
<div id="containingBlock">
    foo
    <div id="inner">this is my text</div>
</div>

要确定两个 div 的宽度，我们需要http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width *

让我们从#inner：

  • 获得首选的最小宽度

     this
 is
 my
 text
|----| preferred minimum width

  • 获得首选宽度

     this is my text
|---------------| preferred width

  • 将两者与可用宽度进行比较：

    computed width = min(max(preferred minimum width, available width),
                     preferred width)

    简单的。但是可用宽度是多少？由于我们没有边距/填充/边框，它只是containingBlock. 但是现在我们得到了一个无限循环，因为同样的算法再次适用：

  • 获取 containsBlock 的首选最小宽度

     foo
 +-------+
 | inner |
 +-------+
|--?????--| preferred minimum width

换句话说：要获得 的宽度inner，我们必须知道 的宽度，containingBlock反之亦然。

实际上，看起来浏览器只是available width = 0在这种情况下假设：http://jsfiddle.net/pxvJJ/6/。但这不在规范中，还是我遗漏了一些明显的东西？

* （请注意，此规范尚未被 CSS3 取代）

4

1 回答 1

2

如果我们仔细阅读规范，我们会发现

CSS 2.1 没有定义确切的 [shrink-to-fit] 算法。

它应该是

类似于使用自动表格布局算法计算表格单元格的宽度

反过来，它是依赖于实现的。

所以，上面的例子表明，在实现一个简单的算法时，从 containsBlock 的首选最小宽度#inner的计算中排除可能是一个好主意，我们最终会得到这样的结果：

|---| preferred minimum width
 foo
 +-------+
 | inner |
 +-------+
|--?????--|

这可能是浏览器所做的。

话虽如此，问题是：哪些元素实际上有助于 containsBlock 的首选最小宽度？

让我们看看如果#innerhas会发生什么position:static; width: auto。这个案子就更难了。同样，规格给出了约束

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

这次不允许缩水。而且，再次，它无法解决。或者可以吗？很有趣，它可以！让我们看看实际发生了什么：http: //jsfiddle.net/pxvJJ/12/

jsfiddle.net/pxvJJ/12/的截图

显然，静态定位的 div 的处理方式不同。所以我想确定包含块宽度的算法是这样的：

  1. 确定正常流中所有包含的块框的首选宽度。
  2. 包含块的设置宽度=这些首选宽度的最大值
  3. 计算所有包含框的宽度，现在包含块的宽度已知

我仍然对为什么（所有）浏览器这样做感到困惑。在这方面，似乎没有理由对绝对定位的元素进行不同的处理。

于 2013-07-13T05:40:04.730 回答