Question

阅读CSS规范https://drafts.csswg.org/css2/visudet.html#blockwidth我在第10.3.3节中略微摸不着头脑。据说这解释了块级非替换元素是如何在其包含块中布局的。它写着：

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

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

..如果以上所有都具有“auto”以外的计算值，则称这些值为“过度约束”，并且其中一个使用值必须与其计算值不同。如果包含块的'direction'属性值为'ltr'，则忽略指定的'margin-right'值，并计算该值以使等式为true。如果'direction'的值是'rtl'，则会发生'margin-left'。

这表明元素总会被拉伸或以某种方式缩小以适应其包含块，但事实显然并非如此;将宽度设置为显式值将使元素比包含块更窄或更宽，必要时溢出。此外，我没有看到边缘右边距或边距左边属性根据等式改变的迹象。

所以我误解了规范（诚然可能！）或者浏览器没有正确实现它？

Answer 1

例如，假设包含块为400px宽，并且块具有：

margin-left: 15px
border-left-width: 15px
padding-right: 15px
width: 300px
padding-right: 15px
border-right-width: 15px
margin-right: 15px

然后，总和将为390px，因此剩余的可用空间为10px。

由于direction默认为ltr，因此右边距的使用值将为25px而非15px。也就是说，剩余的可用空间被添加到右边距，以便使块与包含块的左边对齐。

否则，将修改左边距以使块与右边对齐。

＆＃13;

.container {
  margin-bottom: 10px;
  width: 400px;
  border: 1px solid red;
}
.block {
  margin: 0 15px;
  border: 15px solid;
  padding: 0 15px;
  width: 300px;
  direction: ltr;
}
.ltr { direction: ltr; }
.rtl { direction: rtl; }

＆＃13;

Left-to-right container:
<div class="ltr container">
  <div class="block">
    Right margin becomes 25px instead of 15px
  </div>
</div>
Right-to-left container:
<div class="rtl container">
  <div class="block">
    Left margin becomes 25px instead of 15px
  </div>
</div>

＆＃13;

如果总和大于包含块，则剩余的可用空间将为负数。这不是问题，因为利润可能是负面的。

因此，从视觉上来说，它是正确实施的。但请注意，浏览器可能只是将剩余的可用空间分配到块的左侧或右侧，而不是修改其边距。

这可能解释了为什么getComputedStyle似乎返回了错误的结果。根据{{3}}，它应返回CSSOM，如果是边距

如果属性适用于元素或伪元素而且 resolved value显示＆＃39;}财产不是＆＃39;没有＆＃39;， resolved value是resolved value。否则，used value是resolved value。

然后，在这种情况下，它应该是25px，但在大多数浏览器上似乎都是15px。

浏览器是否正确实现了CSS规范中的可视化格式模型？

1 个答案: